Vue2.0表单校验组件vee-validate的使用详解
vee-validate使用教程本文适合有一定Vue2.0基础的同学参考，根据项目的实际情况来使用，关于Vue的使用不做多余解释。本人也是一边学习一边使用，如果错误之处敬请批评指出* 一、安装注意：@next,不然是Vue1.0版本 二、引用组件设置:assets/js/zh_CN 代表你存放语言包的目录，从node_modules/vee-validate/dist/locale目录下面拷贝到你的项目 Validator还有更多应用，下面再讲。 config其它参数，delay代表输入多少ms之后进行校验，messages代表自定义校验信息，strict=true代表没有设置规则的表单不进行校验，errorBagName属于高级应用，自定义errors，待研究 三、基础使用
提醒：错误信息里面的名称通常就是表单的name属性，除非是通过Vue实例传递进来的。 提醒：养成好习惯，给每个field添加 关于errors：上面的代码我们看到有
关于ValidatorValidator是以 你也可以在构造了validator之后设置对象参数 validator.attach('email','required|email'); // attach field.
validator.attach('name','required|alpha','Full Name'); // attach field with display name for error generation. validator.detach('email'); // you can also detach fields. 最后你也可以直接传值给field，测试是否可以通过校验，像这样： 四、内置的校验规则
五、自定义校验规则1.直接定义 {
// Return a Boolean or a Promise.
}
//最基本的形式，只返回布尔值或者Promise，带默认的错误提示
2.对象形式 3.添加到指定语言的错误消息 {
// 英文错误提示
},cn: (field,args) => {
// 中文错误提示
}
},args) {
// Returns a Boolean or a Promise.
}
};
创建了规则之后，用extend方法添加到Validator里面 field + '必须是11位手机号码',},validate: (value,args) => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}d{8})$/.test(value)
}
}
Validator.extend('mobile',isMobile);
//或者直接 Validator.extend('mobile',{ 然后接可以直接把mobile当成内置规则使用了： 4.自定义内置规则的错误信息 const dictionary = {
en: { messages: { alpha: () => 'Some English Message' } },cn: { messages: { alpha: () => '对alpha规则的错误定义中文描述' } } }; Validator.updateDictionary(dictionary); 暂时介绍到这里，应该已经上手了，有空再继续翻译。 其它问题或者更高级应用，请参考官方文档Vee-Validate 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |