欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-10 13:16:59
如下所示:

如下所示:

<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表单自定义校验规则介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。