vue表单自定义校验规则介绍
前端之家收集整理的这篇文章主要介绍了
vue表单自定义校验规则介绍，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
{
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 validatePass = (rule,callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule,callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm2: {
pass: '',checkPass: '',age: ''
},rules2: {
pass: [
{ validator: validatePass,trigger: 'blur' }
],checkPass: [
{ validator: validatePass2,age: [
{ validator: checkAge,trigger: 'blur' }
]
}
};
},methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
vue2.X+elementUI表单自定义验证方法
export default {
data () {
var ruleNumber = (rule,callback) => {
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (value === '') {
callback(new Error('请输入乘车人手机号码'));
} else if(!myreg.test(value)) {
callback(new Error('请输入正确乘车人手机号码'));
}else {
callback(); //重点在这 如果在验证通过后不
添加callback()
函数在验证时是条件会为false
}
};
return {
ruleForm: {
name: '',number: ''
},rules: {
number: [{ validator: ruleNumber,trigger: 'blur' }]
}
}
},methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) { //在验证通过时时不返回callback()时 这一步进不来
console.log(valid)
} else {
return false
}
});
}
}
}
以上这篇vue表单自定义校验规则介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/30674.html
