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获取GridView选择的行内容
Apr 14 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
jquery分割字符串的方法
Jun 24 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
第八节 访问方式 [8]
2006/10/09 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python post请求实现代码实例
2020/02/28 Python
python 从list中随机取值的方法
2020/11/16 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
护士自我鉴定
2013/10/23 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
《童年》教学反思
2014/02/18 职场文书
2015年大学生工作总结
2015/04/21 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL