elementUI中的el-form怎么使用正则进行验证
http://element.eleme.io/#/zh-CN/component/form里给出了一个form验证的例子,但是都是使用el-form带有的验证规则,怎么使用自己定义的规则进行验证呢?:
.vue的html不变,只是在.ts中的验证中添加自己定义的规则,比如
.vue中
<el-form ref="newUser" :model="newUser" :rules="newUserRule" class="login-container"> <el-row> <el-col :span="10"> <el-form-item prop="userId"> <el-input v-model="newUser.userId" placeholder="请输入sso用户名字"> <template slot="append">@gridsum.com</template> </el-input> </el-form-item> </el-col> <el-col :span="3" :offset="1"> <el-select v-model="newUser.roleType"> <el-option :value="0" :label="roleText[0]"></el-option> <el-option :value="1" :label="roleText[1]"></el-option> </el-select> </el-col> <el-col :span="2" :offset="1"> <el-button type="primary" @click="addUser()">添 加</el-button> </el-col> </el-row> </el-form>
注意:
1. el-form-item的 prop="userId"跟el-input的v-model="newUser.userId"要对应
2. prop一定要写在el-form-item上
3. :rules一定要写在el-form上
.ts中
newUserRule = { userId: [ { required: true, message: '请输入账号', trigger: 'blur' }, { validator: (rule, value, callback) => { if (/^[a-zA-Z]{4,20}$/.test(value) == false) { callback(new Error("用户名由4-20位字母组成")); } else { callback(); } }, trigger: 'blur' //这里还有blur触发方法; 如果设为none,那么只有this.$refs[formName]['validate']时才会验证
} ] };
提交表单时,先进性验证是否通过,再进行其他操作,具体实现,给出的链接里面有,但是使用ts的话如果没有声明文件,会提示validate等方法不存在,可以自己去声明,或者换种思路解决:
addUser() { /* this.$refs[formName]['validate']((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); */ if (this.newUser.userId == '') { this.$message.error('用户名不能为空!'); } else if(/^[a-zA-Z]{4,20}$/.test(this.newUser.userId) == false) { this.$message.error('用户名不正确!'); } else { //此处可以进行后台提交 } }
elementUI中的el-form怎么使用正则进行验证的更多相关文章
- ElementUI中如何实现Form表单内的文字居中
<el-table :data='orderList' border stripe :align='center' :cell-style='cellStyle' :header-cell-st ...
- element-ui中关闭对话框清空验证,清除form表单数据
对于elementUI中对话框,点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示.今天终于自己查资料解决了,分享给大家 1.首先在你的对话框 取消按钮 加一个c ...
- vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框
vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...
- Element-ui 中对表单进行验证
Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验 如果是直接绑定属性,是可以的,但是绑定对象中的属性就需要特别处理,需要在rules中添加双引号 " "或者 ...
- js 中使用el表达式 关键总结:在js中使用el表达式一定要使用双引号
js 中使用el表达式 关键总结:在js中使用el表达式一定要加双引号 js控制中用到了el表达式,最开始源码如下: var selected = ${requestScope.xxxxForm.re ...
- HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析
相同name的submit 类型的input提交行为 描述 这种情况, <input type="submit" name="ACTION" value= ...
- 谈谈Backbone.js中的el
小编最近开始接触backbone.js,这个曾经非常优秀的一款MVC前端框架,在学习的过程中,遇到下图的这样一个问题 下面上代码 小编的想法很简单,只是view了一个实例,然后在initalize中调 ...
- js文件中使用EL表达式的问题
var str = '${str}' ; var str = '${obj.属性名}'; 只可以再jsp页面的<script></script>中使用,外部引入的js文件中不能 ...
- [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39209533 官方例子:http://docs.sencha.com/extjs/5. ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
随机推荐
- call、apply和bind的用法
在改变 this 指向的时候,经常会把这三个方法混淆,下面就详细的整理一下三者的用法和区别 call() 方法 call() 方法可以有无数个参数 第一个参数是改变 this 指向的对象 后面的参数直 ...
- 『ACM C++』PTA浙大 | 基础题 - 打印沙漏
<数据结构>开课前的一些小作业练习,可能因为一个寒假都没有打C++手生了,整个寒假都在帮拍电影做后期特效,导致这道题居然用了两个钟去AC,深感惭愧,作个标记吧,下面上题. 一首好曲推荐:同 ...
- Redis安装与简单配置
一.Redis介绍 1.redis是什么? remote dIctionary server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redis提 ...
- CVE-2017-11882复现-office命令执行
0x01 前言 11月14日,微软按照惯例发布了11月的安全更新,随后不久,安全公司EMBEDI在官方博客上公开了其向微软提交的编号为CVE-2017-11882的Office远程代码执行漏洞: ht ...
- node.js常用的fs文件系统
fs文件系统模块对于系统文件及目录进行一些读写操作. 模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync(). 异步的 ...
- JS高级. 02 面向对象、创建对象、构造函数、自定义构造函数、原型
面向对象的三大特性: 封装 a) 把一些属性和方法装到一个对象里 2. 继承 a) js中的继承是指: 一个对象没有一些方法和属性,而另一个对象有 把另一个个对象的属性和方法,拿过来自己用, ...
- [原]解决phpstudy下的nginx无法运行的问题
一直在用phpstudy下的apache,今天忽然想切换到nginx,出现了一些错误,最终还是解决了. 之前是php 5.3 + apache 现在是php 5.3n + nginx 问题就出在这n上 ...
- Hadoop(7)-HDFS客户端的API操作
1 客户端环境准备 根据自己电脑的操作系统拷贝对应的编译后的hadoop jar包到非中文路径 配置HADOOP_HOME的环境变量,并且在path中配置hadoop的bin 重启电脑 2. Hdfs ...
- 虚拟机服务没有启动的 CentOS 和 Ubuntu 无法上网
测试用 vmware 安装 OSX,安装补丁时要停止 vmware 的服务.如下图: 结果忘记启动了,导致 centos\ubuntu 等所有虚拟机都无法上网...所有的 启动这四个服务后,一切恢复正 ...
- 【SAPUI5】ODataを構成するもの
はじめに SAPUI5でアプリケーションを作るにあたり.ODataは避けては通れないトピックです.結構広いテーマなので.5-7回くらいに分けて書きたいと思います.1回目はODataの概要について説明し ...