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 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
node.js文件操作系统实例详解
Nov 05 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之第十天
2006/10/09 PHP
PHP的ASP防火墙
2006/10/09 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php遍历目录方法小结
2015/03/10 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
jquery ui对话框实例代码
2013/05/10 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Flask框架的学习指南之用户登录管理
2016/11/20 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
链表面试题-一个链表的结点结构
2015/05/04 面试题
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
英文简历自荐信范文
2013/12/11 职场文书
2014新年寄语
2014/01/20 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
面试后的英文感谢信
2014/02/01 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
逃课检讨书
2015/01/26 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis