<el-form :model="form" :rules="rules"><el-form-item label="年龄" prop="age"><el-input v-model.number="form.age"></el-input></el-form-item>
</el-form>
export default {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {callback();}}};return {form: {age: ''},rules: {age: [{ validator: checkAge, trigger: 'blur' }]}};
}
可能原因有一下几点:
1首先: el-from 里面要绑定modal和rules, :model=“ruleForm” :rules=“rules” ;
然后:el-form-item 里面的 prop对应绑定一个rules里面的规则,prop=“age”;
input输入框里面要绑定 v-model.number=“ruleForm.age”
2,form和rules里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。
-
仔细检查下每个标签里面对应的值是否正确。
详细的表单校验请访问 Element UI 官网:Element UI 表单校验