详解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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
如何使node也支持从url加载一个module详解
Jun 05 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
详细分析vue表单数据的绑定
Jul 20 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读写文件的方法(生成HTML)
2006/11/27 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
python实现弹跳小球
2019/05/13 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
班组长安全职责
2014/01/05 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
2014年大学生自我评价
2014/01/19 职场文书
借款协议书
2014/09/16 职场文书
2014年科普工作总结
2014/12/06 职场文书
2015年妇女工作总结
2015/05/14 职场文书
为自己工作观后感
2015/06/11 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Python获取字典中某个key的value
2022/04/13 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB