vue 表单验证 rule message bug All In One
vue 表单验证 rule message bug All In One
有 rules message ❌
<el-form-item
class="is-required"
label="应用名"
prop="appName"
:rules="[
{
required: true,
message: '请输入应用名',
trigger: 'blur',
validator: validateAppName,
},
]">
<el-input
style="width: 300px;"
placeholder="4-20个字符,中文占两个字符"
v-model="ruleForm.appName"
@change="appNameChange"
/>
</el-form-item>
appNameChange (value) {
if(value) {
this.validateFieldByKey('appName');
}
},
validateAppName (rule, value, callback) {
const len = Util.getByteLen(value.trim());
const wordList = this.prohibitedList.filter(item => value.includes(item));
if (value === '') {
// callback(new Error(rule.message));
callback(new Error('请输入应用名'));
} else if ( len < 4 || len > 20) {
callback(new Error('4-20个字符,中文占两个字符,请正确输入'));
} else if (wordList.length > 0) {
callback(new Error(`包含违禁词:${wordList.join('、')}`));
} else {
callback();
};
},
注释掉 rules message ✅
<el-form-item
class="is-required"
label="应用名"
prop="appName"
:rules="[
{
required: true,
// message: '请输入应用名',
trigger: 'blur',
validator: validateAppName,
},
]">
<el-input
style="width: 300px;"
placeholder="4-20个字符,中文占两个字符"
v-model="ruleForm.appName"
@change="appNameChange"
/>
</el-form-item>
appNameChange (value) {
if(value) {
this.validateFieldByKey('appName');
}
},
validateAppName (rule, value, callback) {
const len = Util.getByteLen(value.trim());
const wordList = this.prohibitedList.filter(item => value.includes(item));
if (value === '') {
// callback(new Error(rule.message));
callback(new Error('请输入应用名'));
} else if ( len < 4 || len > 20) {
callback(new Error('4-20个字符,中文占两个字符,请正确输入'));
} else if (wordList.length > 0) {
callback(new Error(`包含违禁词:${wordList.join('、')}`));
} else {
callback();
};
},
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15562755.html
未经授权禁止转载,违者必究!