表单校验插件 -----vee-validate

1.安装插件

npm i vee-validate@next

2.导入校验组件

import { Form, Field } from 'vee-validate'
​
components: {
  Form,
  Field
},

3.校验规则

export default {
  // 校验account
  account (value) {
    if (!value) return '请输入用户名'
    return true
  }
}

4.表单配置校验规则

<Form
  class="form"
  :validation-schema="mySchema"  //校验规则
  v-slot="{ errors }"            //校验后的错误提示
  autocomplete="off"
>
 <!-- 表单元素 -->
</Form>

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 }
 } 

5.表单项应用

输入框

<div class="form-item">
  <div class="input">
    <i class="iconfont icon-user"></i>
    //输入框
+    <Field
+      v-model="form.account"
+      name="account"
      type="text"
      placeholder="请输入用户名"
+     :class="{ error: errors.account }"
+    />
  </div>
  //错误提示
+  <div class="error" v-if="errors.account">
+    <i class="iconfont icon-warning" />{{ errors.account }}
+  </div>
</div>

协议选择框

<div class="form-item">
  <div class="agree">
+    <Field
+      as="XtxCheckbox"
+      name="isAgree"
+      v-model="form.isAgree"
+    />
    <span>我已同意</span>
    <a href="javascript:;">《隐私条款》</a>
    <span>和</span>
    <a href="javascript:;">《服务条款》</a>
  </div>
-  <!-- 当错误发生时显示错误提示语 -->
+  <div class="error" v-if="errors.isAgree">
+    <i class="iconfont icon-warning" />
+    {{ errors.isAgree }}
+  </div>
</div>

6.表单提交整体校验

const login = async () => {
      //通过绑定的ref来校验表单
      const { valid } = await fm.value.validate()
      //valid 
      //true  校验通过
      //false 校验不通过
      
      if (valid) {
        // 调用接口
        try {
          await store.dispatch('user/getProfile', formData)
          // 消息提示
          msg({ type: 'success', text: '登录成功' })
          // 跳转
          router.replace(route.query.redirectUrl || '/')
        } catch (error) {
          console.dir(error)
          msg({ type: 'error', text: error.response.data.message })
        }
      }
    }

\