详解element-ui 表单校验 Rules 配置 常用黑科技


Posted in Javascript onJuly 11, 2020

type

指示type要使用的验证器。可识别的类型值为:

string:类型必须为stringtype 默认是 string

// 校验
string: [
 {type: 'string', message: `请输入字符串`, trigger: 'blur'}
]

<el-form-item label="测试字段" prop="string">
 <el-input v-model.number="form.string" placeholder="请输入"></el-input>
</el-form-item>

详解element-ui 表单校验 Rules 配置 常用黑科技

number:类型必须为number

// 校验
number: [
 {type: 'number', message: `请输入数字`, trigger: 'blur'}
]

<el-form-item label="测试字段" prop="number">
 <el-input v-model="form.number" placeholder="请输入"></el-input>
</el-form-item>

详解element-ui 表单校验 Rules 配置 常用黑科技

boolean:类型必须为boolean

// 校验
boolean: [
 {type: 'boolean', message: `请输入数字`, trigger: 'change'}
]

<el-form-item label="测试字段" prop="boolean">
 <el-select v-model="form.boolean" placeholder="请选择">
 <el-option label="true" :value="true"></el-option>
 <el-option label="false" :value="false"></el-option>
 <el-option label="字符串" :value="'zifuchuan'"></el-option>
 </el-select>
</el-form-item>

详解element-ui 表单校验 Rules 配置 常用黑科技

integer:类型必须为 number 且为整数。

// 校验
float: [
 {type: 'float', message: `请输入浮点数`, trigger: 'blur'}
]

详解element-ui 表单校验 Rules 配置 常用黑科技

float:类型必须为 number 且为浮点数。

// 校验
array: [
 {type: 'array', message: `请选择数组`, trigger: 'change'}
]

<el-form-item label="测试字段" prop="array">
 <el-select v-model="form.array" placeholder="请选择">
 <el-option label="数组" :value="[1,2,3]"></el-option>
 <el-option label="false" :value="false"></el-option>
 <el-option label="字符串" :value="'zifuchuan'"></el-option>
 </el-select>
</el-form-item>

详解element-ui 表单校验 Rules 配置 常用黑科技

array:类型必须为数组

// 校验
enum: [
 {type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}
]

详解element-ui 表单校验 Rules 配置 常用黑科技

enum:值必须存在于中 enum

// 校验
url: [
 {type: 'url', message: `请输入正确的url`, trigger: 'change'}
]

详解element-ui 表单校验 Rules 配置 常用黑科技

url:类型必须为 url

// 校验url: [ {type: 'url', message: `请输入正确的url`, trigger: 'change'}]

详解element-ui 表单校验 Rules 配置 常用黑科技

其他

email:类型必须为 email

method:类型必须为 function

regexp:必须是 RegExp 创建新时不会产生异常的的实例或字符串 RegExp

object:类型必须为 object

date:类型必须为 date

hex:类型必须为 hex

any:任何类型

Required

required 属性为true是,该字段为必填项

// 校验
name: [
 {required: true, message: `请输入`, trigger: 'blur'}
]

Pattern

pattern 规则属性指示一个正则表达式的值必须匹配,才能通过验证。

// 校验
number: [
 {pattern: /^[0-9]*$/, message: `请输入数字`, trigger: 'blur'}
]

min、max

规定最小长度与最大长度

// 校验
minmax: [
 {min: 3, max: 8, message: '请输入3-8位', trigger: 'blur'}
]

len

指定确切长度。(如果该len属性与min和max范围属性结合使用,len则优先。)

// 校验
length: [
 {len: 5, message: '请输入5位', trigger: 'blur'}
]

whitespace

验证是否只有空格

// 校验
whitespace: [
 {whitespace: true, message: '只存在空格', trigger: 'blur'}
]

Transform

有时有必要在验证之前转换值,以强制或以某种方式对其进行清理。为此 transform ,向验证规则添加一个功能。在验证之前,先转换属性,然后将其重新分配给源对象,以更改该属性的值。

// 校验
transform: [
 {type: 'enum', enum: [2,4,6], message: `结果不存在`, trigger: ['change', 'blur'], transform(value) {return Number(value * 2)}}
]

Messages

校验不通过提示

asyncValidator

可以为指定的字段自定义异步验证功能

validator

可以为指定字段自定义验证功能

let numberLengthSix = (rule, value, callback) => {
 if(String(value).length > 6) {
 callback('超出限制')
 } else {
 callback()
 }
}

// 校验
numberLengthSix: [
 {validator: numberLengthSix, trigger: 'blur'}
]

到此这篇关于element-ui 表单校验 Rules 配置 常用黑科技的文章就介绍到这了,更多相关element-ui 表单校验 Rules 配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
koa源码中promise的解读
Nov 13 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 #Javascript
VSCode 配置uni-app的方法
Jul 11 #Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 #Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 #Javascript
详解JavaScript匿名函数和闭包
Jul 10 #Javascript
Vue watch响应数据实现方法解析
Jul 10 #Javascript
详解Vue之事件处理
Jul 10 #Javascript
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP echo()函数讲解
2019/02/15 PHP
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python闭包思想与用法浅析
2018/12/27 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
个人简历自我评价八例
2013/10/31 职场文书
大学生自我鉴定
2013/12/16 职场文书
军训感想500字
2014/02/20 职场文书
酒店开业策划方案
2014/06/02 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript