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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
文件系统基本操作类
2006/11/23 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python单例模式的多种实现方法
2019/07/26 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python如何提升爬虫效率
2020/09/27 Python
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
开业主持词
2014/03/21 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
公司合作协议书范本
2014/04/18 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL