element 验证详解自定义验证规则

如图，验证功能点名称，长度1-20并且是数字和字母的组合。

长度是1-20，这个很好办，直接 el-form表单上添加 :rules="rules" ，添加个 ref="ruleForm" ，下面提交的时候好识别， prop="powerName" 就是对应的规则的名称了

<el-form :model="form" :rules="rules" ref="ruleForm"><el-form-item label="功能点名称 *" prop="powerName" :label-width="formLabelWidth"><el-input v-model="form.powerName"  type="text"placeholder="请填写功能点名称(1-20位,数字或字母或两者的组合)"></el-input></el-form-item><el-form-item label="功能点描述 *" prop="description" :label-width="formLabelWidth"><el-inputtype="text"autosizeplaceholder="请填写功能点描述(1-10位)"v-model="form.description"></el-input></el-form-item>
</el-form>
<div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary"  @click='enSure("ruleForm")'>确 定</el-button>
</div>

然后对应的 js 里面添加规则，（这里只例举个简单的，具体的请移步官方），当 required: true 的时候，前面会自动带上红色的小星星，提示是必填的

rules: {powerName: [{ required: true, message: '请输入功能点名称', trigger: 'blur' },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],description: [{ required: true, message: '请输入功能点描述', trigger: 'blur' },{ min: 1, max: 20, message: '长度在 1 到 10 个字符', trigger: 'blur' }],
},

然后提交的方法这么写，就行了

enSure(powerName){console.log('this.form==',this.form);this.$refs[powerName].validate((valid) => {if (valid)  {console.log(this.form.powerName);} else {console.log('error submit!!');return false;}});
},

但是我们还想要数字和字母的组合，这种私人订制的官方里面可没有哇，这时候我们就得自定义，正则和element自带验证规则结合起来用了

首先，在咱们需要验证的地方，添加 { validator: validateName, trigger: 'blur' } ， validator 这就是告诉代码，这里要自定义了，自定义验证的规则的名字叫做 validateName ，一共有三个参数，rule, value, callback，打印一下就知道是啥了

var validateName = (rule, value, callback) => {console.log('rule',rule);console.log('value',value);var patt1 = /^[A-Za-z0-9]+$/;console.log('============',value.match(patt1));if (!value.match(patt1))  {callback(new Error('请输入数字或字母或两者的组合'));} else{callback();}
};

如有不足，欢迎指出 ^ - ^

element 验证详解自定义验证规则相关推荐

android-短信验证功能,Android实现获取短信验证码的功能以及自定义GUI短信验证详解...
<Android实现获取短信验证码的功能以及自定义GUI短信验证详解>由会员分享,可在线阅读,更多相关<Android实现获取短信验证码的功能以及自定义GUI短信验证详解(8页珍藏版 ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
JavaScript 身份证号有效验证详解及实例代码
这篇文章主要介绍了JavaScript 身份证号有效验证详解及实例代码的相关资料,需要的朋友可以参考下 JavaScript验证身份证号 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
LNMP搭建过程详解，验证搭建论坛
LNMP搭建过程详解,验证搭建论坛一.安装Nginx服务 1.安装依赖包 2.创建运行用户 3.编译安装 4.优化路径 5.添加Nginx 系统服务二.安装MySQL服务 1.安装Mysql环境依 ...
python编写一个登陆验证程序_Python实现简单登录验证详解
本文实例为大家分享了简单的Python登录验证,供大家参考,具体内容如下编写登录接口要求:1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 #coding=utf-8 __aut ...
【转载】CodeWarrior IDE使用tips之prm链接文件详解(自定义存储器分区以及自定义RAM数据初始化与在RAM中运行函数）...
CodeWarrior IDE使用tips之prm链接文件详解(自定义存储器分区以及自定义RAM数据初始化与在RAM中运行函数) 2017-08-19 胡恩伟汽车电子expert成长之路内容提要 ...
firewall添加白名单_详解firewall的规则设置与命令(白名单设置)
一. 设置firewall规则例1:对外暴露8080端口 firewall-cmd --permanent --add-port=8080/tcp 例2:使mysql服务的3306端口只允许192. ...
Linux systemctl 详解自定义 systemd unit
Linux systemctl 详解&自定义 systemd unit systemctl 序大家都知道,我们安装了很多服务之后,使用 systemctl 来管理这些服务,比如开启.重启.关 ...
SVG 详解——自定义可点击的中国地图
SVG 详解--自定义可点击的中国地图 SVG 定义 SVG 是一种图像文件格式,类似于 JPG.PNG.只不过 JPG 和 PNG 这种文件需要图像引擎加载,而 SVG 则是由画布来加载的. 它的英 ...

element 验证详解自定义验证规则

element 验证详解自定义验证规则相关推荐

最新文章

热门文章

element 验证详解 自定义验证规则

element 验证详解 自定义验证规则相关推荐

最新文章

热门文章

element 验证详解自定义验证规则

element 验证详解自定义验证规则相关推荐