首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

vue vee-validate验证插件使用

2018年11月08日 发布 阅读(4151) 作者:Jerman

vee-validate是vue项目中前端用到的一个表单验证插件

安装

  1. npm install vee-validate --save

引入

假如我们的验证都是放在一个统一的验证文件validate.js
直接上代码吧

  1. import Vue from "vue";
  2. import VeeValidate, { Validator } from "vee-validate";
  3. // vee-validate配置
  4. const config = {
  5. aria: true,
  6. classNames: {},
  7. classes: false,
  8. delay: 0,
  9. dictionary: null,
  10. errorBagName: "errors", // change if property conflicts
  11. events: "blur",
  12. fieldsBagName: "fields",
  13. i18n: null, // the vue-i18n plugin instance
  14. i18nRootKey: "validations", // the nested key under which the validation messages will be located
  15. inject: true,
  16. // 这一荐项目跟后面的dictionary.zh_CN对应
  17. locale: "zh_CN",
  18. validity: false
  19. };
  20. Vue.use(VeeValidate, config);
  21. // 自定义相关提示
  22. const dictionary = {
  23. zh_CN: {
  24. // attributes对应form表单的name值
  25. attributes: {
  26. loginUsername: "帐号",
  27. loginPassword: "密码",
  28. captcha: "图形验证码"
  29. },
  30. // 对应各个rule返回的提示信息,这里自定义一些中文提示
  31. // ${field}对应 attributes各属性的值
  32. messages: {
  33. required: field => `${field}不能为空`,
  34. min: (field, value) => `${field}不能少于${value}位字符`,
  35. max: (field, value) => `${field}不能多于${value}位字符`,
  36. length: (field, value) => `${field}必须是${value}位字符`
  37. }
  38. }
  39. };
  40. Validator.localize(dictionary);

vue组件中应用

通过v-validate属性绑定各个input输入框,v-validate通过”|”竖线隔开各个验证规则

下面组件使用的是mint-ui框架,登录按钮绑定一个login方法,login方法触发的时候,进行各项验证

  1. <template>
  2. <div class="login-container">
  3. <div class="g-input" ref="loginForm">
  4. <!-- user -->
  5. <mt-field label=" " v-model.trim="loginForm.username" placeholder="手机号/用户名/邮箱" class="login-user" v-validate="'required|min:6|max:20'" name="loginUsername" :attr="{maxlength:20}"></mt-field>
  6. <!-- password -->
  7. <mt-field label=" " v-model="loginForm.password" placeholder="请输入登录密码" :type="passwordType" class="login-pwd" v-validate="'required|min:6'" name="loginPassword">
  8. <div :class="toggleClass" @click="togglePassword"></div>
  9. </mt-field>
  10. <mt-field label="验证码" v-model.trim="loginForm.code" placeholder="请输入验证码" v-validate="'required|length:6'" name="captcha" :attr="{maxlength:6}">
  11. <img :src="captcha" height="35px" width="80px" @click="getCode" style="margin-left:10px;">
  12. </mt-field>
  13. </div>
  14. </div>
  15. </template>
  16. <script scoped>
  17. import Vue from "vue";
  18. import { mapGetters } from "vuex";
  19. import "@/utils/security";
  20. import { Spinner } from "mint-ui";
  21. import { Toast } from "mint-ui";
  22. import "@/utils/validate";
  23. Vue.component(Spinner.name, Spinner);
  24. export default {
  25. name: "Login",
  26. methods: {
  27. // 登录
  28. login() {
  29. // 先关闭已有的toast,否则会重叠
  30. this.toast && this.toast.close();
  31. this.$validator.validate().then(flag => {
  32. // 验证
  33. // 验证不通过时,flag返回false,验证通过时,flag返回true
  34. if (!flag) {
  35. const errors = this.$validator.errors;
  36. // 这里还可以通过遍历errors对象,完全自定义提示
  37. // errors.items.forEach(item => {
  38. // let field = item.field;
  39. // let rule = item.rule;
  40. // // switch (field) {
  41. // // case "username":
  42. // // if (rule == "required") {
  43. // // item.msg = "用户名不能为空";
  44. // // } else if (rule == "min") {
  45. // // item.msg = "用户名不能少于6个字符";
  46. // // } else if (rule == "max") {
  47. // // item.msg = "用户名不能多于20个字符";
  48. // // }
  49. // // break;
  50. // // case "password":
  51. // // if (rule == "required") {
  52. // // item.msg = "密码不能为空";
  53. // // } else if (rule == "min") {
  54. // // item.msg = "密码不能少于6位字符";
  55. // // }
  56. // // break;
  57. // // case "code":
  58. // // if (rule == "required") {
  59. // // item.msg = "验证码不能为空";
  60. // // } else if (rule == "length") {
  61. // // item.msg = "验证码必须是6位字符";
  62. // // }
  63. // // break;
  64. // // }
  65. // });
  66. // console.log(errors);
  67. // 从items中取第一个错误,toast方法提示
  68. this.toast = Toast(errors.items[0].msg);
  69. return;
  70. }
  71. // 前端验证通过
  72. // 提交
  73. this.$store
  74. .dispatch("loginByUsername", {
  75. username: this.loginForm.username,
  76. password: this.encryptPassword,
  77. code: this.loginForm.code
  78. })
  79. .then(res => {
  80. ...
  81. });
  82. });
  83. },
  84. }
  85. };
  86. </script>

直接转中文提示的方法

还是在validate.js文件中,这样设置,需要安装vue-i18n依赖

  1. import zh_CN from "vee-validate/dist/locale/zh_CN";
  2. import VueI18n from "vue-i18n";
  3. Vue.use(VueI18n);
  4. const i18n = new VueI18n({
  5. locale: "zh_CN"
  6. });
  7. Vue.use(VeeValidate, {
  8. i18n,
  9. i18nRootKey: "validation",
  10. dictionary: {
  11. zh_CN
  12. }
  13. });

内置相关方法

来源网络

  1. after{target} - target要大的一个合法日期,格式(DD/MM/YYYY)
  2. alpha - 只包含英文字符
  3. alpha_dash - 可以包含英文、数字、下划线、破折号
  4. alpha_num - 可以包含英文和数字
  5. before:{target} - after相反
  6. between:{min},{max} - minmax之间的数字
  7. confirmed:{target} - 必须和target一样
  8. date_between:{min,max} - 日期在minmax之间
  9. date_format:{format} - 合法的format格式化日期
  10. decimal:{decimals?} - 数字,而且是decimals进制
  11. digits:{length} - 长度为length的数字
  12. dimensions:{width},{height} - 符合宽高规定的图片
  13. email - 不解释
  14. ext:[extensions] - 后缀名
  15. image - 图片
  16. in:[list] - 包含在数组list内的值
  17. ip - ipv4地址
  18. max:{length} - 最大长度为length的字符
  19. mimes:[list] - 文件类型
  20. min - max相反
  21. mot_in - in相反
  22. numeric - 只允许数字
  23. regex:{pattern} - 值必须符合正则pattern
  24. required - 不解释
  25. size:{kb} - 文件大小不超过
  26. url:{domain?} - (指定域名的)url

官方参考: https://baianat.github.io/vee-validate/

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处