|
今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
<div id="app">
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
</el-form-item>
</el-form>
</div>
var Main = {
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 validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, 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, trigger: 'blur' }
],
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表单自定义验证方法
<template>
<div class="taxi-appointment-dairen">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<div class="dairen-input">
<el-form-item>
<el-input
v-model="ruleForm.name"
placeholder="请输入乘车人姓名（选填）">
</el-input>
</el-form-item>
<i class="fa fa-user fa-2x"></i>
</div>
<div class="dairen-input">
<el-form-item prop="number">
<el-input
v-model="ruleForm.number"
placeholder="请输入乘车人手机号码">
</el-input>
</el-form-item>
<i class="fa fa-mobile-phone fa-2x"></i>
</div>
<div class="popover-btn">
<el-button @click="submitForm('ruleForm')" type="primary">确定</el-button>
</div>
</el-form>
</div>
</template>
<script>
export default {
data () {
var ruleNumber = (rule, value, 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
}
});
}
}
}
</script>
以上这篇vue表单自定义校验规则介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。 | 
发表于 2018-8-28 11:00:28
