Element UI 自定义正则表达式验证方法


Posted in Javascript onSeptember 04, 2018

如下所示:

//指定数据中心的验证表单valiForm,验证规则rules
<el-form :model="valiForm" :rules="rules" ref="valiForm" label-width="100px" class="demo-valiForm">

  <el-form-item label="名称:" :label-width="formLabelWidth" prop='name'>
   <el-input v-model="valiForm.name"></el-input>
  </el-form-item>

</el-form>
//add('valiForm')方法要传验证表单名
<el-button type="primary" @click="add('valiForm')">确 定</el-button>
data () {
 let nameRule1 = (rule, value, callback) => {
  let regExp = //;
  if (regExp.test(value) === false) {
   callback(new Error('不通过正则'));
  } else {
   callback();
  }
 };

 return {
  valiForm: {
   name: ''
  },
  rules: {
   name: [
   { required: true, message: '请输入名称', trigger: 'blur' },
   { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' },
   { validator: nameRule1, trigger: 'blur' }
   ]
  }

 };
 },
methods:{
 add(formName) {
  this.$refs[formName].validate((valid) => {
  if (valid) {
   //通过验证执行
  } else {
   //验证失败执行
   console.log('error submit!!');
   return false;
  }
  });
 }
}

以上这篇Element UI 自定义正则表达式验证方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
js字符编码函数区别分析
Dec 28 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue组件name的作用小结
May 23 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
js 图片懒加载的实现
Oct 21 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 #Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 #Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 #Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 #Javascript
create-react-app安装出错问题解决方法
Sep 04 #Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 #Javascript
工作中常用到的ES6语法
Sep 04 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
React Router基础使用
2017/01/17 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
JavaScript ES 模块的使用
2020/11/12 Javascript
python爬虫爬取淘宝商品信息
2018/02/23 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
中等生评语大全
2014/05/04 职场文书
初中学校军训方案
2014/05/09 职场文书
投资建议书模板
2014/05/12 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
雷锋之歌观后感
2015/06/10 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python