【Element UI】表单及其验证规则详细

Form表单验证

Form组件提供了表单验证的功能，需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名

1. 使用方法

结构：

<template><div><el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" label-width="100px"class="demo-ruleForm"><el-form-item label="电话" prop="phone"><el-input v-model.number="loginForm.phone" placeholder="请输入电话" prefix-icon="el-icon-phone" /></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleLogin">登录</el-button></el-form-item></el-form></div>
</template>

数据解释：

1. v-model：表单数据绑定
2. status-icon:（布尔属性）
   当设置为 true 时，表单字段在验证后会显示一个状态图标：
   ✅ 绿色对勾：表示验证通过
   ❌ 红色错误：表示验证失败
3. :rules=“loginRules”：绑定loginRules验证规则
4. ref：用来获取表单组件，手动触发验证
5. label:表单名
6. props： (表单验证)表单对象loginForm中的数据名
   如果验证失败，ElementUI 会 自动 在 <el-form-item> 下方显示错误信息（message），而 prop 就是找到数据对应规则的桥梁。
7. prefix-icon：图标
8. show-password：出现小眼睛可点击密码是否可见

逻辑：

export default {data() {const validatePhone = (rule, value, callback) => {if (!value) {return callback(new Error('电话不能为空'));} else {const regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;if (!regPhone.test(value)) {callback(new Error('请输入正确的手机号'));} else {callback();}}};return {loginForm: {phone: '',password: '',},loginRules: {phone: [{ required: true, validator: validatePhone,  message: '请输入正确手机号', trigger: 'blur' }],password: [{ required: true, massage: '输入密码', trigger: 'blur' },{ min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }]}}},methods: {handleLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {this.loading = true;alert('登陆成功！');} else {return false;}})}}
}

loginRules中每个表单项可以包含多条校验规则{}，第一条若不符合则之后的校验规则则不执行
validate()方法是组件内置的，用来对表单内容进行验证

2. rule参数

参数	类型	说明	示例
type	String	字段类型	邮箱验证：{ type: 'email' }
required	Boolean	是否必填	{ required: true }
message	String/Function	错误提示	{ message: '必填项' }
trigger	String/Array	触发事件	{ trigger: ['blur', 'change'] }

参数	说明	示例
pattern	正则表达式验证	{ pattern: /^1\d{10}$/ }
min/max	数值/长度范围	{ min: 6, max: 12 }
len	固定长度	{ len: 11 }
enum	枚举值验证	{ enum: ['admin', 'user'] }
whitespace	禁止纯空格	{ whitespace: true }
validator	自定义验证函数	{validator:validatePhone}

密码强度验证：{ pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/, message: '需包含大小写和数字' }

3. validator回调函数

validator: (rule, value, callback) => {// 验证逻辑if (/* 验证失败条件 */) {callback(new Error('错误提示信息'));} else {callback();}
}

1. rule：Object (当前验证规则对象，包含该字段的所有验证规则信息)
2. value：当前表单字段的值
3. callback：验证完成后的回调函数

• 验证成功时调用：callback()；
• 验证失败时调用：callback(new Error('错误提示信息'))

异步服务器验证

username: [{required:true,message:'请输入用户名'},{validator:(rule,value,callback)=>{checkUsernameAvaliable(value).then(available=>{if(!available){callback(new Error('用户名已存在'));}else{callback();}});},trigger:'blur'}
]