【vue3】pc端使用vee-validate进行表单校验

校验步骤

1.下载插件

npm i [email protected]

2.导入组件,注册组件

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

3.Form代替表单,Field代替input

    <Form  class="form" >
      <template  >

        <Field class="form-item" >
          <div class="input">
            <i class="iconfont icon-user"></i>
            <input type="text" placeholder="请输入用户名 " />
          </div>

        </Field>
        <Field class="form-item">
          <div class="input">
            <i class="iconfont icon-lock"></i>
            <input type="password" placeholder="请输入密码">
          </div>
         
        </Field>
      </template>
      <a @click="login()" href="javascript:;" class="btn">登录</a>
      </Form>

4.Field里 加name=校验规则,

5.Field双向数据绑定v-model,字段名最好和接口文档一致 因为要发给后台

6.定义Field里的name属性的校验规则函数,Form的validation-schema接收校验规则是对象

7.Form里写v-slot="{errors}"

8.Field中 显示的错误提示 v-if="errors. "

9.需要重置数据得数据和校验规则，获取元素，然后resetField()

10.啥都没输入时候，点击登录做整体表单校验

Field默认解析成input,如果field想是组件得话 就加 as='组件名'

 <Form  class="form" v-slot="{errors}" :validation-schema="mySchema">
      <template  >
        <Field class="form-item" name="name" v-model="form.name">
          <div class="input">
            <i class="iconfont icon-user"></i>
            <input type="text" placeholder="请输入用户名 " />
          </div>
          <!-- 错误提示 -->
          <div v-if="errors.name" class="error"><i class="iconfont icon-warning" />{
    
    { errors.name}}</div>
        </Field>
        <Field class="form-item" name="pwd" v-model="form.pwd">
          <div class="input">
            <i class="iconfont icon-lock"></i>
            <input type="password" placeholder="请输入密码">
          </div>
           <!-- 错误提示 -->
           <div v-if="errors.pwd" class="error"><i class="iconfont icon-warning" />{
    
    { errors.pwd}}</div>
        </Field>
      </template>
      <a @click="login()" href="javascript:;" class="btn">登录</a>
      </Form>

  setup () {
    // 表单信息对象
    const form = reactive({
      name: null,
      pwd: null
    })
    // 校验规则
    const mySchema = {
      name (value) {
        if (!value) return '请输入用户名'
        if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'
        return true
      },
      password (value) {
        if (!value) return '请输入密码'
        if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
        return true
      }
    }
    // 切换表单元素，还原数据和清除校验效果
    const target = ref(null) // 获取元素

    // 重置数据
    form.name = null
    form.pwd = null
    // 校验效果清除，Form组件提供resetForm()
    target.value.resetForm()

    // 点击登录
    const login = async () => {
      // 对表单整体校验，validate函数
      // Form组件提供了一个 validate_函数作为整体表单校验，当是返回的是一个promise
      const valid = await target.value.validate()// 等校验通过做操作
      console.log(valid)
      //请求登录接口..
    }
    return {  mySchema, login }
  }