element custom validation rules for el-input
First of all, if the custom verification takes effect, the keys of prop and rules must correspond to each other, such as example: (prop="description" has a corresponding key in rules)
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"> <el-form-item label="describe:" prop="description"> <el-input type="textarea" v-model="" maxLengtn="128" placeholder="Please enter a description"></el-input> </el-form-item> </el-form>
rules: {
description: [{ required: true, message: 'Please enter a description', trigger: 'blur' }]
}Custom verification pass in custom parameters
The custom verification of elementui cannot be passed into custom parameters. If you want to pass in custom parameters, you can do the following:
rules: {
description: [{
validator: (rule, value, callback) => {
(rule, value, callback, )
},
trigger: ['blur', 'change']
}]
}It is equivalent to a custom parameter, and then you can receive the custom parameters and also verify the value of the input box.
Example:
Verify the type of the value of an input box. The type of this value may be one or more of ['list', 'num', 'bool', 'str'], but if it is a list, it can only be a list type
// The data types are ['list', 'num', 'bool', 'str']// The data type of an input box may be// Case 1: The data type is ['list'], and the data types of the input value may be satisfied. Return true, and finally convert the value in the input box to the array type using split(',')// Case 2: The data type is ['num', 'bool', 'str'], and the input value is for example 12/true/'abc', and use typeof value to determine the input data type// let allTypes = ['list', 'num', 'bool', 'str']
/**
* @param {*} arr The data type of the input box
* @param {*} value The value of the input box
*/
function checkType (arr, value) {
if (('list') && === 1) { // Not sure yet return true
} else {
// The value obtained by el-input is a string, so it needs to be processed, '1', 'true', 'yes', 0/1, using (value) you can convert the corresponding type of value. If ('abc') will directly report an error try {
value = (value)
} catch (error) {
// String not processed }
if (['yes', 'no'].includes(value)) {
value = value === 'yes'
}
return (item => {
return (typeof value).indexOf(item) !== -1
})
}
}
(checkType(['num', 'str', 'bool'], 'abc'))
element-ui custom form verification, but no little red heart appears
Basically, there is no big problem in doing it in the way provided in the document. The problem I encountered is that the little red star will not be displayed after customization.
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form-item label="password" prop="pass">
<el-input type="password" v-model="" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Confirm Password" prop="checkPass">
<el-input type="password" v-model="" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="age" prop="age">
<el-input =""></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">submit</el-button>
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
</el-form-item>
</el-form><script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('Age cannot be empty'));
}
setTimeout(() => {
if (!(value)) {
callback(new Error('Please enter a numeric value'));
} else {
if (value < 18) {
callback(new Error('must be at least 18 years old'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please enter your password'));
} else {
if (this. !== '') {
this.$refs.('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please enter your password again'));
} else if (value !== this.) {
callback(new Error('The password is inconsistent when two times are entered!'));
} else {
callback();
}
};
return {
ruleForm2: {
pass: '',
checkPass: '',
age: ''
},
rules2: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>I just changed it as
let validatePass = (rule, value, callback) => {
(rule);
(value);
(callback);
if (!value) {
return callback(new Error("Please fill in the company name"));
}
if () {
callback();
return true;
}
readScmSupplierPage({ name: ,type:'2'})
.then(res => {
if ( > 0) {
callback(new Error("Dull name"));
} else {
callback();
}
})
.catch(err => {
(err);
});
};Basically, it has nothing to do with customization
rules: {
// name: [{ required: true, message: "Please enter the company name", trigger: "blur" }], name: [{ required: true, validator: validatePass, trigger: "blur" }],
abbreviation: [
{ required: true, message: "Please enter the company abbreviation", trigger: "blur" }
]
},But I found that if you customize it, adding required: true in this place will not work. You must add it on the form form.
<el-form-item label="Company Name" :label-width="formLabelWidth" prop="name" required> <el-input v-model=""></el-input> </el-form-item>
Just like this, the little red star appears
The above is personal experience. I hope you can give you a reference and I hope you can support me more.