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必备技能一、表单验证规则的更多相关文章

  1. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  2. Yii 表单验证规则---总结

    Filter: 过滤,'filter'=>'trim',表示去空格 Required:必须的,表示不能为空 Match: 匹配正则,需要和pattern一起使用,定义正则表达式,'pattern ...

  3. YII 表单验证规则

    官方文档:http://www.yiichina.com/guide/form.model 类参考手册:http://www.yiichina.com/api/CValidatorhttp://www ...

  4. Element表单验证规则

    一.简单的逻辑验证使用方法: 方法步骤: 1.在html中给el-form增加 :rules="rules" 2.html中在el-form-item 中增加属性 prop=&qu ...

  5. CI设置表单验证规则

    CodeIgniter 允许你为单个表单域创建多个验证规则,按顺序层叠在一起, 你也可以同时对表单域的数据进行预处理.要设置验证规则, 可以使用 set_rules() 方法: $this->f ...

  6. jquery.validate.js之自定义表单验证规则

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. vue + element 实现登录注册(自定义表单验证规则)

    注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: <template> <div> <div class="register-wrapper& ...

  8. [转]DWZ表单验证规则一览表(留着自己用)

    <form onsubmit="return validateCallback(this)" class="pageForm" action=" ...

  9. Yii2 注册表单验证规则 手机注册时候使用短信验证码

    public function rules() { return [ ['username', 'filter', 'filter' => 'trim'], ['username', 'requ ...

随机推荐

  1. easyui 表单提交前的 confirm 处理

    最近学习用 easyui,异步提交表单是遇到一个小问题 $('#fModiDetail').form('submit',{ url:'...', onSubmit:function(){ if($(t ...

  2. NIO与IO

    待续... 该文章部分摘自:http://tutorials.jenkov.com/java-nio/index.html 一.I/O简介 I/O(英语:Input/Output),即输入/输出, 指 ...

  3. 类加载器ClassLoader的理解

    最近在做一个热加载Class的小组件,这个组件需要对类加载器ClassLoader有所了解,我就顺便借这个机会把学到的一点皮毛与大家分享一下. 从Class文件开始 ClassLoader,顾名思义就 ...

  4. AD复制问题汇总

    1:文件复制服务NtFrs 13568报错的解决方法 解决方法: 建议不要按照日志的提示进行操作,正确的操作应该是 出现这个问题的原因,是由于在硬件的损坏,导致服务器未正确处理NTFS USN 日志. ...

  5. cesium入门示例-矢量化单体分类

    实现楼层的分层选择和属性信息展示,该功能基于大雁塔倾斜数据实现单体化分类显示. 数据准备: 1.大雁塔倾斜数据,已转换为3dTiles,参考cesium入门示例-3dTiles加载的第2节osgb数据 ...

  6. 【转载/部分修改】超实用STL——set的入门使用

    本文部分转载自他人博文,少部分自行进行了添改qwq 参考文章:https://blog.csdn.net/chaoyueziji123/article/details/38422211 作者:chao ...

  7. if分支判断

    # 控制语句 分支 循环语句 # 判断语句 if ..elif..else # if 条件语句(比较 逻辑 成员运算) # 空数据 == False # 非空数据 == True age = 20 i ...

  8. babel-runtime 使用场景

    Babel 转译后的代码要实现源代码同样的功能需要借助一些帮助函数,例如,{ [name]: 'JavaScript' } 转译后的代码如下所示: 'use strict'; function _de ...

  9. JavaScript 语言精粹笔记3

    方法 毒瘤 糟粕 记录一下阅读蝴蝶书的笔记,本篇为书中最后一部分:方法.代码风格.优美的特性.毒瘤.糟粕等. 方法 这一章主要介绍了一些方法集.这里写几个我不太熟悉的方法和要点吧. array.joi ...

  10. 对javascript EventLoop事件循环机制不一样的理解

    前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...