vue表单验证

element-ui使用的验证库是validator，一个下载量非常大的验证库，非常方便 参考www.npmjs.com/package/val… 或参考element-ui form表单验证部分的使用

这里介绍一款vue专用验证库，下载量也很大，叫做vee-validate 下面是全局引用和使用方式

安装： npm i vee-validate

全局引入，main.js import { ValidationProvider,localize } from "vee-validate/dist/vee-validate.full"; import zh_CN from 'vee-validate/dist/locale/zh_CN.json'; localize("zh_CN",zh_CN); //表示使用中文提示错误信息 Vue.component("ValidationProvider", ValidationProvider);

使用案例

<el-form-item label="邮箱" >
          <ValidationProvider name="Email:"
            :rules="{required:true,email:true,max:{length:10}}"
            v-slot="{ errors }"
          >
            <el-input
              v-model="form.email"
              placeholder="请输入号码"
            ></el-input>
            <span>{{ errors[0] }}</span>
          </ValidationProvider>
 </el-form-item>

使用ValidationProvider 包裹需要校验的输入项目即可
参考官网[https://logaretm.github.io/vee-validate/](https://logaretm.github.io/vee-validate/)
可翻译成中文阅读