iview必备技能一、表单验证规则
iView表单组件使用async-validator验证器对表单域中数据进行验证,给
Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方法也支持 Promise。
当我们对表单中某个string类型的域设置为必填时,我们可以使用如下规则
{type: 'string' ,required:true,message:'不能为空'}
但是如果我们直接输入空格也会通过验证
如何对输入的空格进行验证?
下面介绍两种方法:
方法一:在表单域的标签上绑定时使用v-model.trim代替v-model
例如
<form-item label=" 姓名 " prop="name">
<i-input v-model.trim="name" placeholder="请填写姓名" size="small">
</i-input>
</form-item>
使用这种方法会直接将首尾空格trim掉,表单提交时的数据是没有首尾空格的,如果想保留首尾空格,可以使用方法二。
方法二:在验证规则上加上transform函数
例如
{type: 'string' ,transform:value=>value?value.trim():'',required:true,message:'不能为空'}
transform函数是在验证时对数据进行预处理的函数(处理后的结果仅用作验证),不会改变表单的数据。
vue+iview的form表单校验总结 https://www.cnblogs.com/codebook/p/11332824.html
https://www.jianshu.com/p/7da7b06fb257
https://blog.csdn.net/ztx114/article/details/92806695
https://www.jianshu.com/p/550f2a74094a
验证数字的正则表达式集
验证数字:^[0-9]*$
验证n位的数字:^\d{n}$
验证至少n位数字:^\d{n,}$
验证m-n位的数字:^\d{m,n}$
验证零和非零开头的数字:^(0|[1-9][0-9]*)$
验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数:^\+?[1-9][0-9]*$
验证非零的负整数:^\-[1-9][0-9]*$
验证非负整数(正整数 + 0) ^\d+$
验证非正整数(负整数 + 0) ^((-\d+)|(0+))$
验证长度为3的字符:^.{3}$
验证由26个英文字母组成的字符串:^[A-Za-z]+$
验证由26个大写英文字母组成的字符串:^[A-Z]+$
验证由26个小写英文字母组成的字符串:^[a-z]+$
验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串:^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。
验证是否含有 ^%&',;=?$\" 等字符:[^%&',;=?$\x22]+
验证汉字:^[\u4e00-\u9fa5],{0,}$
验证Email地址:/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码:^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$:--正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
验证身份证号(15位或18位数字):^\d{15}|\d{}18$
验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。
整数:^-?\d+$
非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数(负浮点数 + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?$
iview必备技能一、表单验证规则的更多相关文章
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- Yii 表单验证规则---总结
Filter: 过滤,'filter'=>'trim',表示去空格 Required:必须的,表示不能为空 Match: 匹配正则,需要和pattern一起使用,定义正则表达式,'pattern ...
- YII 表单验证规则
官方文档:http://www.yiichina.com/guide/form.model 类参考手册:http://www.yiichina.com/api/CValidatorhttp://www ...
- Element表单验证规则
一.简单的逻辑验证使用方法: 方法步骤: 1.在html中给el-form增加 :rules="rules" 2.html中在el-form-item 中增加属性 prop=&qu ...
- CI设置表单验证规则
CodeIgniter 允许你为单个表单域创建多个验证规则,按顺序层叠在一起, 你也可以同时对表单域的数据进行预处理.要设置验证规则, 可以使用 set_rules() 方法: $this->f ...
- jquery.validate.js之自定义表单验证规则
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- vue + element 实现登录注册(自定义表单验证规则)
注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: <template> <div> <div class="register-wrapper& ...
- [转]DWZ表单验证规则一览表(留着自己用)
<form onsubmit="return validateCallback(this)" class="pageForm" action=" ...
- Yii2 注册表单验证规则 手机注册时候使用短信验证码
public function rules() { return [ ['username', 'filter', 'filter' => 'trim'], ['username', 'requ ...
随机推荐
- 客户端和后台交互日期注意点 sqlite日期字段使用Date类型的情况下
不要直接传递时间类型 一般把时间格式化字符串后传递 不要传递Date().getTime() 毫秒数 非要使用的话需要在后台处理 传递的毫秒数 - TimeZone.getDefault().get ...
- Windows下 webstorm安装tomcat配置svn并使用
先附上所需要的软件的下载地址:https://pan.baidu.com/s/1c2ripd2 1.下载并安装jdk以及配置jdk的环境变量 1)下载jdk,选择安装目录安装,我选择的是默认路径,安装 ...
- 洛谷-P3369-普通平衡树(Treap)
题目传送门 标题说平衡树,那么应该AVL,红黑树都能过,但是这次做这题主要是学习Treap,所以花了几天搞出了这题.其他方法以后再说吧 Treap(带旋转) #include <bits/std ...
- springboot+mybatis登录注册
接上上一篇博客的继续往下做,上一篇已经实现了mybatis自动生成代码,和连接数据库测试部分 本篇我们添加一些功能,实现登录注册,时间原因,前端实现的很粗糙,以后有时间再改吧 首先看一下数据库的构成, ...
- 安装与使用django-restframework
django-restframework 一.安装与使用 1.安装 >: pip3 install djangorestframework 2.使用 在settings.py中注册: INSTA ...
- Mysql分区,分库和分表
作者说的非常清楚了,感谢.地址为:http://haitian299.github.io/2016/05/26/mysql-partitioning/. 本人项目实践,使用sharding-jdbc进 ...
- 如何使用Outlook 客户端配置其他邮箱客户端收发邮件
本文介绍Outlook2016客户端配置QQ邮箱收发邮件 1.打开Outlook客户端,文件->信息->-添加账户 2.输入需要添加的邮箱账户,点击连接 3.输入密码并连接 4.打开QQ邮 ...
- 植物基因组|注释版本问题|重测序vs泛基因组
生命组学: 细菌和其他物种比,容易发生基因漂移,duplication和重排. 泛基因组学研究的一般思路是通过comparison找到特殊基因区域orspecific gene,研究其调控机制(即通过 ...
- 三分钟学会使用Derby数据库
Derby数据库是一个纯用Java实现的内存数据库,属于Apache的一个开源项目.由于是用Java实现的,所以可以在任何平台上运行:另外一个特点是体积小,免安装,java1.6开始集成了derby数 ...
- Substring(Codeforces-D-拓扑排序)
D. Substring time limit per test 3 seconds memory limit per test 256 megabytes You are given a graph ...