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 检测浏览器和操作系统的脚本
Dec 26 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
JavaScript 的继承
Oct 01 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
javascript实现连续赋值
Aug 10 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
详解CocosCreator项目结构机制
Apr 14 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
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP可变变量学习小结
2015/11/29 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
村级个人对照检查材料
2014/08/22 职场文书
重阳节活动总结
2014/08/27 职场文书
见习报告格式要求
2014/11/04 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
阿里云日志过滤器配置日志服务
2022/04/09 Servers