【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参数

密码强度验证：{ 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'
	}
]