详解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 15 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 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 常用函数库和一些实用小技巧
2009/01/01 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
浅谈Python中的数据类型
2015/05/05 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Pandas的Apply函数具体使用
2020/07/21 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
诉讼财产保全担保书
2014/05/20 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
员工手册编写范本
2015/05/14 职场文书