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>

来源：https://blog.csdn.net/DricWang/article/details/77506914