前言

最近在使用 Element-ui 中的 form组件 写功能的时候，需要用到表单的校验功能，于是去翻看了下官方文档，但是没找到相关校验规则书写的模式，今天特意写一篇介绍常用的Element-ui中form组件的校验规则书写模式，方便以后如果忘了可以及时翻看回想起来。

1、表单校验的基本使用

Form 组件提供了表单验证的功能，只需要通过表单自带的 rules属性 传入约定的验证规则，并将 Form-Item的 prop属性 设置为需校验的字段名即可。校验规则参见 async-validator。

<template><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item>......</el-form>
</template><script>export default {data() {......var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};return {ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],......}};},......}
</script>

如上，在data中定义表单验证规则的对象数组rules（可以单独编写验证器函数），并直接绑定到表单标签的rules参数中。

其中，validator 是单个表单域格式验证的验证器，一般是需要比较复杂的格式验证的时候才会用。如果是非空验证、数据类型验证或者正则表达式能处理的，都可以直接通过rules的type/pattern等相关参数直接配置就好了。

2、表单验证规则（重点来了！！！）

咱们结合Element-ui的例子来说：

rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }]......}

如上，rules对象中单个表单域校验规则可以包含多个数组，每个数组即是一条校验规则：

name: [//这是一条验证规则{ required: true, message: '请输入活动名称', trigger: 'blur' },//这也是一条验证规则{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]

数组中的单个校验规则对象中包含 required/message/trigger/min/max 等参数，这些参数配合起来，可以完成我们以往要编写多行代码才能实现的校验功能。
下面就详细介绍这些参数：

type：

表明要使用验证器的类型，类似数据格式检验，其中还有email、url、regexp、method等特定格式字段的验证；
使用这个，我们就可以对一些特定的字段进行校验，而不用再像以前一样写正则，做判断；
比如只需要配置 type:'email' 的规则就可以验证email了，验证器都已经封装好了这些功能，你只需调用就可以了；
对应的可识别的属性值有：

string: 字符串类型（默认值）
number: 数字类型
boolean:布尔类型
method: 函数类型
regexp:正则表达式
integer: 整型
float: 双精度浮点型数字
array: 数组类型
object: 对象类型
enum: 枚举值
date: 日期格式
url: 网址格式
hex: 16进制数字
email: 电子邮箱格式
any: 任意类型

最常见的email验证：

email = [{type: 'string',required: true,message: '请输入邮箱地址',trigger: 'blur'},{type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change']}
]

如上图所示，实现了文本框失去焦点进行非空检验；失去焦点、内容改变进行格式验证，并给出相应提示。

required：

必填字段，即非空验证。如上面实例中的的非空验证，以及邮箱前边的必填符号*，就是这个参数的功劳。

pattern：

正则表达式，如果需要验证手机号码之类，可以直接编写正则表达式配置到校验规则中，那么就不需要自己去校验了，由校验器自动校验：

phone:[{ type : "string" , required: true , pattern : /^[a-z]+$/ }]

min/max：

判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较：

num:[{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]

whitespace：

验证是否只有空格(如果没有该配置，则全空格的输入值也是有效的）。

whitespace: [{type: "string",message: '只存在空格',whitespace:true,trigger: ['change', 'blur']
}]

messages:

未通过校验的提示信息：

{name:[{type: "string", required: true, message: "Name is required"}]
}

同时 message 内还支持html标签：

{name:[{type: "string", required: true, message: "<b>Name is required</b>"}]
}

validator：

可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点，但是能实现比较复杂的业务逻辑判断。
基础用法：

  field: {validator(rule, value, callback) {return value === 'test';},message: 'Value is not equal to "test".',}

总结：

这些就是在我使用过程中经常用到的一些常见的表单验证规则，当然这篇文章我是参考了这位大佬的文章而写出来的，如果想了解更加详细的一些校验规则的话可以访问这个地址https://www.cnblogs.com/xyyt/p/13366812.html
（ps：又是菜的不行的一天，stay hungery stay foolish）

Element-ui中form组件的校验规则相关推荐

修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
【关于Element UI中el-autocomplete组件】一、el-autocomplete组件添加底部固定按钮
小伙伴们,不知道大家再开发过程中使用el-autocomplete时候会不会遇到需要在下拉建议值中加入自定义按钮,例如添加按钮之类的,如图: 那么这个按钮是如何加上去的呢? 首先我们在这个建议值列表中 ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
element ui 中 Popover 组件定位不精准的问题
问题原因 Popover 内部数据动态获取到之后,Popover 尺寸变化导致的定位不准确. 解决方法动态数据获取到之后,调用 Popover 的 updatePopper() 方法重新计算 Pop ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...

Element-ui中form组件的校验规则

Element-ui中form组件的校验规则

前言

1、表单校验的基本使用

2、表单验证规则（重点来了！！！）

总结：

Element-ui中form组件的校验规则相关推荐

最新文章

热门文章