Vue vee-validate插件的简单使用

目录

1.安装2.导入3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)5.使用 Field 组件，添加表单项目校验6.补充表单数据和验证规则数据

1.安装

npm i vee-validate@4.0.3

2.导入

import { Form, Field } from \'vee-validate\'

3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)

// 创建js文件进行导出
export default {
  // 校验项account
  account (value) {
    if (!value) return \'不能为空\'// 条件判断,
    return true // 最后全部通过必须return true
  },
  password (value) {
    if (!value) return \'请输入密码\'
    if (!/^\\w{6,24}$/.test(value)) return \'密码是6-24个字符\'
    return true
  },
  mobile (value) {
    if (!value) return \'请输入手机号\'
    if (!/^1[3-9]\\d{9}$/.test(value)) return \'手机号格式错误\'
    return true
  },
  code (value) {
    if (!value) return \'请输入验证码\'
    if (!/^\\d{6}$/.test(value)) return \'验证码是6个数字\'
    return true
  },
  isAgree (value) {
    if (!value) return \'请勾选同意用户协议\'
    return true
  }
}

4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)

// validation-schema=\"mySchema\"  配置校验规则
// v-slot：导出错误对象
<Form
  :validation-schema=\"mySchema\"
  v-slot=\"{ errors }\"
>
 <!-- 表单元素 -->
</Form>

<script>
  import schema from \'@/utils/vee-validate-schema\'
  setup () {
    // 表单对象数据
    const form = reactive({
      account: null, // 账号
      password: null // 密码
    })
    // 校验规则对象
    const mySchema = {
      account: schema.account,
      password: schema.password
    }
    return { form, mySchema }
 } 
</script>

5.使用 Field 组件，添加表单项目校验

//1. 把input改成 `Field` 组件，默认解析成input
//2. `Field` 添加name属性，作用是指定使用schema中哪个校验规则
//3. `Field`添加v-model，作用是提供表单数据的双向绑定
//4. 发生表单校验错误，显示错误类名`error`，提示红色边框

<Field
      v-model=\"form.account\"
      name=\"account\" 
      type=\"text\"
      placeholder=\"请输入用户名\"
      :class=\"{ error: errors.account }\" // 如果返回错误信息,为true 显示类error
    />
    <!-- <input type=\"text\" placeholder=\"请输入用户名\" /> -->

6.补充表单数据和验证规则数据

// 表单绑定的数据
const form = reactive({
  account: null, // 账号
  password: null, // 密码
  isAgree: true // 是否选中
})

// 声明当前表单需要的校验数据规则
const curSchema = reactive({
  account: schema.account, // 账号
  password: schema.password, // 密码
  isAgree: schema.isAgree // 是否选中
})

以上就是Vue vee-validate插件的简单使用的详细内容，更多关于Vue vee-validate插件的资料请关注其它相关文章！