<div> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px"> <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> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <div> <el-form-item> <el-input v-model="ruleForm.name" placeholder="请输入乘车人姓名（选填）"> </el-input> </el-form-item> <i></i> </div> <div> <el-form-item prop="number"> <el-input v-model="ruleForm.number" placeholder="请输入乘车人手机号码"> </el-input> </el-form-item> <i></i> </div> <div> <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表单自定义校验规则介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: