前端必不可少要使用到form表单进行数据的传递,为了优化用户体验和拿到准确类型的数据,需要进行前端验证,本文分析Element UI表单的自定义验证,以年龄验证和密码验证进行分析详解,主要的自定义规则为:验证表单是否为空,输入年龄验证年龄只能为数值,验证年龄必须大于18岁,验证密码不能为空,最后进行表单的提交与重置
先看效果图-----验证前:
表单为空的时候点击提交,验证表单不能为空,验证规则提示用户
填写年龄小于18岁,验证有误提示用户
输入正确年龄验证通过,不提示
接下来是代码:
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input v-model="ruleForm.pass" maxlenght></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
<script>
data() {
//自定义的验证规则,三个参数验证规则,验证的值,回调(返回验证信息)
var checkAge = (rule, value, callback) => {
if (value === '') {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var passWord = (rule,value,cb)=>{
console.log('if前',value)
if(value === ''){
return cb(new Error('请输入密码'));
}else{
setTimeout(() => {
if(value = ''){
value? cb(console.log(value)): cb(new Error('成功!!!'))
}else{
cb('失败!!!')
}
}, 2000);
}
}
return {
//表单验证的内容,在form中使用 :model进行绑定
ruleForm: {
age: '',
pass:''
},
//验证规则,在form中使用 :rules进行绑定
rules: {
//在form中使用porp绑定,代表验证的哪一项的值,进行匹配
age: [
{ validator: checkAge, trigger: 'blur' }
],
pass:[
{validator:passWord,trigger:'blur'}
]
}
};
},
methods: {
//提交按钮方法,验证通过执行
submitForm(ruleForm) {
this.$refs[ruleForm].validate((valid) => {
if (valid) {
//表单验证通过后可在此处进行其他操作
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
//重置方法,点击重置清空表单内信息及错误提示
resetForm(ruleForm) {
this.$refs[ruleForm].resetFields();
}
}
})
</script>