element ui 验证--自定义方法验证-两种验证写法:方法略有不同;
至于基本的表单验证呢,统一写在rules 【表单验证规则】中即可;
第一种:
//直接在表单上进行验证
<el-form-item label="跳过行数" prop="ignoreLines"
:rules="[{ required: true, validator: checkNumber, trigger: 'blur' }]">
//方法定义在methods中
checkNumber(rule, value, callback){
if (!value) {
return callback(new Error('请输入跳过行数'));
} else if (!/^[0-9]*$/g.test(value)) {
return callback(new Error('跳过行数只能输入数字'))
} else if (value < 0) {
return callback(new Error('跳过行数不能小于0'))
}else {
callback()
}
},
第二种:
<el-form-item label="跳过行数" prop="ignoreLines">
<el-input v-model="form.ignoreLines"></el-input>
</el-form-item>
//统一写在form定义好的rules中;prop对应rules中的名称;
rules: {
ignoreLines:[
//{required: true, message: '请输入跳过行数', trigger: 'blur'},
{required:true,validator:checkNumber,trigger: 'blur'}
]
}
//定义一个checkNum验证方法 直接在data中,与return平级
data() {
var checkNumber =(rule, value, callback) =>{
if (!value) {
return callback(new Error('请输入跳过行数'));
} else if (!/^[0-9]*$/g.test(value)) {
return callback(new Error('跳过行数只能输入数字'))
} else if (value < 0) {
return callback(new Error('跳过行数不能小于0'))
}else {
callback()
}
}
}