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 相关文章推荐
复选框全选与全不选操作实现思路
Aug 18 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
JavaScript实现美化滑块效果
May 17 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实现HTML页面静态化的方法
2015/11/04 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
详解Vue.js 响应接口
2020/07/04 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
应届生程序员求职信
2013/11/05 职场文书
搞笑获奖感言
2014/01/30 职场文书
人事专员的岗位职责
2014/03/01 职场文书
文艺晚会主持词
2014/03/24 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs