详解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 相关文章推荐
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
JS实现的自定义map方法示例
May 17 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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使用CURL模拟登录的方法
2015/07/08 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
新手简单了解vue
2019/05/29 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
python利用Guetzli批量压缩图片
2017/03/23 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
Python实现区域填充的示例代码
2021/02/03 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
采购部主管岗位职责
2014/01/01 职场文书
初中班级口号
2014/06/09 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
医德医风学习心得体会
2016/01/25 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers