详解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自定义事件介绍
Aug 29 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
json字符串对象转换代码实例
Sep 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面向对象 字段的声明与使用
2012/06/14 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python实现划词翻译
2020/04/23 Python
python脚本实现查找webshell的方法
2014/07/31 Python
简介Django中内置的一些中间件
2015/07/24 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
django rest framework 自定义返回方式
2020/07/12 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
非功能性需求都包括哪些方面
2013/10/29 面试题
中餐厅经理岗位职责
2014/04/11 职场文书
销售顾问工作计划书
2014/08/15 职场文书
财会专业大学生求职信
2014/09/26 职场文书
表彰大会新闻稿
2015/07/17 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python