vue.js表单验证插件(vee-validate)的使用教程详解
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
综述
名称:vee-validate
用途:简单的 Vue.js 表单验证插件
官网:地址
github:地址
特别提示
配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样
插件既可以应用于SPA也可以应用于多页面,通用性强
安装
单页安装
npm install vee-validate --save
浏览器安装
引入项目
单页引入
浏览器引入
1 2 3 4 5 | <script src= "path/to/vue.js" ></script> <script src= "https://unpkg.com/vee-validate@2.0.0-rc.7" ></script> <script> Vue.use(VeeValidate); // good to go. </script> |
基础使用
1 2 3 4 5 6 7 | <div class= "column is-12" > <label class= "label" for = "email" >Email</label> <p :class= "{ 'control': true }" > <input v-validate= "'required|email'" :class= "{'input': true, 'is-danger': errors.has('email') }" name= "email" type= "text" placeholder= "Email" > <span v-show= "errors.has('email')" class= "help is-danger" ></span> </p> </div> |
代码解析
v-validate=”‘required | email'” |
v-validate 是由该插件提供的指令 作用于html上
“‘required | email'” 字段验证的规则,注意双引号之内必须有单引号,多个规则之间用 | 连接 |
errors.first(‘email') email字段验证不通过时显示相关联的提示信息
验证规则
进一步学习
本地化
使用本地化功能可以让错误提示换成中文
单页中使用
浏览器中使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var dict = { zh_CN: { messages: { required: function (field){ return '请输入' + field ; }, confirmed: function (field) { return '两次输入的密码不一致' ; } }, attributes: { OldPassword: '旧密码' , NewPassword: '新密码' , ConfirmNewPassword: '确认密码' , } } }; VeeValidate.Validator.localize( 'zh_CN' , dict.zh_CN); Vue.use(VeeValidate); var app = new Vue({ // 省略 }); |
代码解析
VeeValidate(浏览器引入js后建立了一个全局对象)
dict 翻译的内容,其中attributes对象表示字段,messages对象表示提示信息
常用方法
出错渲染
字段验证不通过时渲染提示信息时使用
1 2 3 4 5 | errors.first(‘field ') 显示字段field的第一个出错信息 errors.collect(‘field' ) 显示字段field的所有出错信息 errors.has(‘field') 判断fileds字段是否检验有误 erros.all() 显示所有的出错信息 errors.any() 判断是否有错误 |
手动检验
常用于数据提交(写在vue的方法内部)
代码片段
1 2 3 4 5 6 7 | this .$validator.validateAll().then( function (result) { if (result) { //成功操作 } else { // 失败操作 } }) |
检验信息清除
常用于校验成功后清除错误的提示信息
this.errors.clear();
总结
以上所述是小编给大家介绍的vue.js表单验证插件(vee-validate)的使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue3+vite+ts使用monaco-editor编辑器的简单步骤
因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器,下面这篇文章主要给大家介绍了关于vue3+vite+ts使用monaco-editor编辑器的简单步骤,需要的朋友可以参考下2023-01-01elementUI动态表单 + el-select 按要求禁用问题
这篇文章主要介绍了elementUI动态表单 + el-select 按要求禁用问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
最新评论