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=" 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=" 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, 禁止转载 ️，侵权必究⚠️！