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运行耗时操作的延时显示方法
Nov 19 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
基于jquery实现图片放大功能
May 07 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 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
优化PHP程序的方法小结
2012/02/23 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
NodeJs中的VM模块详解
2015/05/06 NodeJs
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
opencv python如何实现图像二值化
2020/02/03 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
优秀班主任材料
2014/12/16 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
幼儿园六一主持词
2015/06/30 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书