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 ...
随机推荐
- Qt基于model/view数据库编程3
QSqlQueryModel和QSqlQuery类: 工程开发过程中将这两个类合起来使用,用QSqlQueryModel查询展示数据库中的数据,用QSqlQuery类执行sql语言,实现对数据库的操作 ...
- LeetCode 中级 - 翻转矩阵后的得分(861)
有一个二维矩阵 A 其中每个元素的值为 0 或 1 . 移动是指选择任一行或列,并转换该行或列中的每一个值:将所有 0 都更改为 1,将所有 1 都更改为 0. 在做出任意次数的移动后,将该矩阵的每一 ...
- python运算符及优先级顺序
python语言是一门脚本语言,支持面向对象.面向过程编程,兼具编译性和解释性的动态语言,整理出学习过程中一些基本Python运算符和运算符的优先级顺序. 一.算术运算符 运算符 描述 + 加 - 两 ...
- Ansible自动化配置详解
第1章 Ansible基本概述 1.1 ansible是一个配置管理系统configuration management system, 你只需要可以使用ssh访问你的服务器或设备就行. 1.安装软件 ...
- js函数的节流和防抖
js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repai ...
- windows 下安装pyspider
今天主要介绍一下在Windows下安装pyspider,pyspider是一款用python编写的网络爬虫框架,这个框架最好是在linux下运行,Windows下运行可能会出现兼容性问题,如果实在要在 ...
- MySQL数据表操作(DDL)
一.创建数据表 语法:create table 表名称(字段 字段类型 [字段属性],字段 字段类型 [字段属性],...) [表选项]; 表选项:数据表的属性,一般包括engine.charset. ...
- python3笔记
python3 Python3 基本数据类型 Python 中有六个标准的数据类型: Numbers(数字) Python可以同时为多个变量赋值,如a, b = 1, 2. 一个变量可以通过赋值指向不 ...
- Hadoop(2)--hdfs
Hadoop(2) Hadoop底层封装的的是HDFS和MapReduce两种框架 在Hdfs中采用的是主从结构(Madter-slaver)就像领导和员工一样,领导负责整个公司的管理工作,而员工就负 ...
- Python学习手册之函数和模块
在上一篇文章中,我们介绍了 Python 的控制结构,现在我们介绍 Python 函数和模块. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9976234 ...