vue vee-validate 表单验证

使用步骤

• 使用第三包提供的Form标签将表单整个区域包裹起来, 如果要进行整体验证, 需要给Form打ref
• 使用第三方包提供的Filed标签将输入框的input替换掉
• 如果表单需要校验，那么必须有name属性
• 将校验规则通过rules绑定到需要校验的Field标签上
• 当用户输入的内容未通过验证规则时，错误信息是从Form标签上的插槽中解构出来的

引入组件

import { Form, Field } from "vee-validate";

模板写法

<Form
    v-slot="{ errors }"
    ref="fromValidate"
>
    <div class="input-text clearFix">
        <span></span>
        <Field
            type="text"
            placeholder="邮箱/用户名/手机号"
            v-model="phone"
            name="account"
            :rules="checkAccount"
        />
        <h1 style="color: red">{{ errors.account }}</h1>
    </div>
    <div class="input-text clearFix">
        <span class="pwd"></span>
        <Field
            type="text"
            placeholder="请输入密码"
            v-model="password"
            name="password"
            :rules="checkPassword"
        />
        <h1 style="color: red">
            {{ errors.password }}
        </h1>
    </div>
    <button
        class="btn"
        @click.prevent="login"
    >
        登&nbsp;&nbsp;录
    </button>
</Form>

书写验证规则

// 定义验证规则
const checkAccount = (val: unknown) => {
    const reg = /^[\a-zA-Z0-9_]+$/;
    if (!val) {
        return "请输入账号";
    } else {
        if (reg.test(val as string)) {
            return true;
        } else {
            return "账号不合法 请输入6-16位数字字母下划线";
        }
    }
};
const checkPassword = (val: unknown) => {
    if (!val) {
        return "请输入密码";
    } else {
        return true;
    }
};

进行整体验证

const login = async () => {
        const { valid } = await fromValidate.value?.validate();
        console.log(valid);

        if (valid) {
            // 如果验证通过进行下一步
            ...
        }
};