vue中validate,
当不使用组件库并且没有好的检查规则时，可以使用这个插件来检查表单。很实用。感兴趣的朋友可以参考这篇文章，了解这个插件的使用方法。
:
目录
1.安装2。导入3。定义验证规则(最好将js文件单独打包在utils文件夹中以便导出)4 .使用表单组件配置验证规则和错误对象(表单和字段都是从插件中导出的)5 .使用字段组件添加表单项验证6。补充表单数据和验证规则数据。
1.安装
npm i vee-validate@4.0.3
2.导入
从“vee-validate”导入{ Form，Field }
3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)
//创建用于导出的js文件
导出默认值{
//检查项目帐户
账户(价值){
如果(！值)返回不能为空//条件判断，
返回真//最后一遍必须返回真
},
密码(值){
如果(！值)返回“请输入您的密码”
如果(！/\ w {6，24} $/。test (value))返回“密码为6-24个字符”
返回true
},
移动(价值){
如果(！Value)返回“请输入您的手机号码”
如果(！/1 [3-9] \ d {9} $/。测试(值))返回“手机号码格式错误”
返回true
},
代码(值){
如果(！值)返回“请输入验证码”
如果(！/\ d {6} $/。测试(值))返回“验证码是6位数字”
返回true
},
isAgree(值){
如果(！Value)返回“请检查是否同意用户协议”
返回true
}
}
4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)
//validation-schema=mySchema 配置验证规则
//v-slot:导出错误的对象。
形式
:验证-schema=mySchema
v-slot=“{ errors }”
！-表单元素-
/表单
脚本
从“@/utils/vee-validate-schema”导入架构
setup () {
//表单对象数据
const form=reactive({
账户：空，//账号
密码：空//密码
})
//检查规则对象
const mySchema={
帐户：schema.account，
密码：架构.密码
}
返回{ form，mySchema }
}
/脚本
5.使用 Field 组件，添加表单项目校验
//1.将输入更改为字段组件，默认情况下，它被解析为输入。
///2.` Field添加name属性，该属性用于指定要使用模式中的哪个检查规则。
///3.` Field添加了v-model，用于提供表单数据的双向绑定。
//4.出现表单验证错误，错误类名“error”显示为红色边框。
田
v-model=form.account
name=account
type=text
Placeholder=请输入用户名
:class= { error:errors . account } //如果返回错误消息，则显示类error为true。
/
！-input type= text placeholder=请输入用户名/-
6.补充表单数据和验证规则数据
//由表单绑定的数据
const form=reactive({
账户：空，//账号
密码：null，//密码
IsAgree:真//选中了吗？
})
//声明当前表单需要的校验数据规则。
const curSchema=reactive({
Account: schema.account，//帐号
密码：schema.password，//password
IsAgree: schema.isAgree //是否选中？
})
以上就是vuvee-validate插件的简单使用细节。更多关于vuvee-validate插件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。