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下function声明一些小结
Dec 28 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
微信jssdk用法汇总
Jul 16 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
简述vue中的config配置
Jan 23 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 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/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
JS array 数组详解
2009/03/22 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python实现二分查找与bisect模块详解
2017/01/13 Python
TensorFlow实现创建分类器
2018/02/06 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
英国著名药妆店:Superdrug
2021/02/13 全球购物
经济信息系毕业生自荐信范文
2014/03/15 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
2014小学年度工作总结
2014/12/20 职场文书