自定义表单验证

有时候 element-plus 官方自带的表单验证不够用，所以我们要自定义验证规则：

<el-form> 应有的属性

<el-form
    class="login_form"
    :model="loginForm"
    :rules="rules"
    ref="form"
></el-form>

• :model 表单绑定的数据
• :rules 表单验证规则
• ref form.value 持有 el-form 组件的实例。通过 form.value，可以调用 el-form 组件的 validate 方法来验证表单。

<el-form-item> 应有的属性

prop 属性用于指定表单项对应的模型字段名称。 它将 el-form-item 组件与 el-form 组件的 model 对象中的字段绑定起来，这样 el-form 可以根据 rules 中的验证规则来自动验证该字段。

<el-form-item prop="username"></el-form-item>

定义表单模型字段 并 获取 el-form 组件

// 收集表单数据
let loginForm = reactive({ username: 'admin', password: '111111' })

// 获取el-form 组件
let form = ref()

校验规则

// 定义表单校验的配置对象
const rules = {
    username: [
        // {
        //     required: true,
        //     message: '用户名不能为空',
        //     trigger: 'change',
        // },
        {
            trigger: 'change',
            validator: validatorUserName,
        },
    ],
    password: [
        // {
        //     required: true,
        //     min: 6,
        //     max: 12,
        //     message: '密码的长度应在6-12位',
        //     trigger: 'change',
        // },
        {
            trigger: 'change',
            validator: validatorPassword,
        },
    ],
}

自定义校验规则的函数

// 自定义校验规则的函数
const validatorUserName = (rule: any, value: any, callback: any) => {
    // rule：为数组校验规则对象
    console.log('chufall:', rule)
    // value：为表单元素文本内容
    console.log(value)
    // callback：如果符合条件，通过callback放行，不的话，也会调用callback，不过会注入错误信息
    if (/^\d{5,10}$/.test(value)) {
        callback()
    } else {
        callback(new Error('账号长度应在5-10位'))
    }
}

const validatorPassword = (rule: any, value: any, callback: any) => {
    // callback：如果符合条件，通过callback放行，不的话，也会调用callback，不过会注入错误信息
    if (value.length >= 6) {
        callback()
    } else {
        callback(new Error('密码长度至少为6位'))
    }
}

表单验证通过后再发请求

// 登录按钮的回调
const login = async () => {
    // 表单验证通过后再发请求
    await form.value.validate()
    // 让登录按钮为加载状态
    loading.value = true
    try {
        // 这里可以书写 .then() 的语法
        // 登陆成功
        await useStore.userLogin(loginForm)
        // 编程式导航跳转到首页
        $router.push('/')
        // 登录成功提示信息
        ElNotification({
            type: 'success',
            message: '登录成功！',
            title: `Hi,${getTime()}欢迎回来！`,
        })
        loading.value = false
    } catch (error) {
        loading.value = false
        // 登录失败的提示信息
        ElNotification({
            type: 'error',
            message: (error as Error).message,
        })
    }
}