vue表单自定义校验规则介绍

如下所示：

 
  
 
 
  
 
 
  
 
 
  提交
  重置
 

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表单自定义验证方法

以上这篇vue表单自定义校验规则介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。