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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
jquery提示效果实例分析
Nov 25 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 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中模拟POST传递数据的两种方法分享
2011/09/16 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
详解Vue底部导航栏组件
2019/05/02 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python opencv图片编码为h264文件的实例
2019/12/12 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python程序控制语句用法实例分析
2020/01/14 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
遗体告别仪式答谢词
2014/01/23 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
贷款委托书怎么写
2014/08/02 职场文书
长城的导游词
2015/01/30 职场文书
安全伴我行主题班会
2015/08/13 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js