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


Posted in Javascript onAugust 28, 2018

如下所示:

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

Javascript 相关文章推荐
javascript 在firebug调试时用console.log的方法
May 10 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
js实现小星星游戏
Mar 23 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 #Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 #Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 #Javascript
浅谈redux以及react-redux简单实现
Aug 28 #Javascript
Vue封装的可编辑表格插件方法
Aug 28 #Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 #Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 #Javascript
You might like
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
js获取form的方法
2015/05/06 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
JS常见算法详解
2017/02/28 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
python自动格式化json文件的方法
2015/03/11 Python
python提取页面内url列表的方法
2015/05/25 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python读取并写入mat文件的方法
2019/07/12 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
创建文明学校实施方案
2014/03/11 职场文书
家长学校实施方案
2014/03/15 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
出国留学自荐信模板
2015/03/06 职场文书
防暑降温通知书
2015/04/27 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
python数字类型和占位符详情
2022/03/13 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电