vue表单自定义校验规则介绍
发布时间：2020-12-17 02:12:07 所属栏目：百科 来源：网络整理
导读：如下所示： { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value { if (value === '') { callback(new Error('请输入密码')); }
|
如下所示： {
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表单自定义校验规则介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |