element-plus中的表单校验

1. 简单校验:

  • 1.1 在script中给出校验规则对象,主要属性名与form对象的属性名一致
  • 1.2 一个字段的校验规则可以有多个,值是一个数组,数组中的一个对象就是一条校验规则
  • 1.3 主要校验规则:
    1.3.1 required:是否必填
    1.3.2 message:不符合此规则时的提示信息
    1.3.3 trigger:触发此条规则校验的时机,有两个值,blurchange,默认就是blurchange都会进行校验
    1.3.4 min:此字段的最小长度
    1.3.5 max:此字段的最大长度
    1.3.6 pattern:正则表达式
    例:
js 复制代码
const rules = reactive({
	username: [
		{required: true, message: '用户名不能为空', trigger: 'blur'},
		{min: 6, max: 14, message: '用户名长度为6-14位'}
	]
})

2. 自定义校验规则:

使用validator()方法:此方法接收三个参数validator(rule,value,callback){};
rule:表示此条规则的描述信息
value:表示表单中此字段的值
callback:回调函数,通过此函数控制是否校验通过
例:

js 复制代码
const rules = reactive({
	username: [
		{
			validator(rule,value,callback){
				if(value[0] === '0'){
					// 校验不通过
					return callback(new Error('账号第一位不能是0'))
				}else{
					// 校验通过
					callback()
				}
			}
		}
	]
})

3. 表单统一校验:

如果用户什么都不输入,直接点击登录,那么每个字段的校验规则是不生效的,因为此字段还没有输入。为了避免用户在不操作表单的情况下,直接提交表单,可以在用户点击提交按钮后,对所有的字段进行校验。

通过validate()方法,对整个表单的所有内容进行一次验证:
form.validate(callback):此方法接收一个回调函数,回调函数的第一个参数是布尔类型,当所有的校验规则都通过时,此值为true,否则为false;回调函数的第二个参数是校验未通过的所有字段的数组。

  1. 在form表单中通过ref属性标识一下
html 复制代码
<el-form ref="formRef"></el-form>
  1. script部分
js 复制代码
// 获取form表单引用
const formRef = ref();
// 当点击登录按钮时的函数:
const submit = ()=>{
	// 获取到真正的表单元素
	formRef.value.validate(valid=>{
		if(valid){
			// 表单所有元素通过验证
			console.log('验证通过');
		}else{
			console.log('invalidFields');
			console.log('验证不通过');
		}
	})
}
相关推荐
神仙别闹2 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器9 分钟前
指定阿里镜像原理
前端
枷锁—sha14 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha15 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻23 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜31 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己34 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900141 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB2444 分钟前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控