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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
无线电广播的开始
2002/01/30 无线电
php桌面中心(二) 数据库写入
2007/03/11 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
GWT都有什么特性
2016/12/02 面试题
上课打牌的检讨书
2014/02/15 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
如何用python插入独创性声明
2021/03/31 Python
golang slice元素去重操作
2021/04/30 Golang
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
Windows7下FTP搭建图文教程
2022/08/05 Servers