【表单校验-------详细（vee-validate）】

校验规则-------详细

1.引入 import { Form, Field } from 'vee-validate'

标签替换  Form替换form   Field替换input

2.给Field加name   eg：name=“mobile”

3.校验规则 @/utils/vee-validate-schema 文件中

定义自己的校验规则对象

import schema from '@/utils/vee-validate-schema'

    // 表单数据对象 input接受用户输入的数据

    const form = reactive({

      mobile:null,

      code:null

    })

    // 校验规则对象  

    const mySchema = {

      mobile:schema.mobile,

      code:schema.code

    }

4.进行数据双向绑定 v-model

<Field v-model="form.mobile" name="mobile" class="input" type="text" placeholder="绑定的手机号" />

5.使用校验规则 就在Form标签中  :vaildation-schema='mySchema'

不想自动填充：autocomplete="off"

如果校验出现问题，通过插槽，得到错误信息：v-slot='{errors}'

<Form class="xtx-form" :vaildation-schema='mySchema'  v-slot='{errors}' autocomplete="off">

6.当有错误时，提示错误信息：v-if="errors.mobile"

错误状态样式：:class="{err:errors.code}"

错误信息：{{errors.mobile}}

<div class="error" v-if="errors.mobile">{{errors.mobile}}</div>