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 相关文章推荐
js展开闭合效果演示代码
Jul 24 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
javascript数组详解
Oct 22 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
js合并两个数组生成合并后的key:value数组
May 09 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
js实现视图和数据双向绑定的方法分析
Feb 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
javascript下string.format函数补充
2010/08/24 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
JS重载实现方法分析
2016/12/16 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python getopt 参数处理小示例
2009/06/09 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python负载均衡的简单实现方法
2018/02/04 Python
python爬取网页转换为PDF文件
2018/06/07 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python将数组n等分的实例
2019/12/02 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Javascript如何发送一个Ajax请求
2015/01/26 面试题
孝敬父母的活动方案
2014/08/31 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL