美文网首页Vue项目VUE
Vant UI + VeeValidate实现表单验证

Vant UI + VeeValidate实现表单验证

作者: 前端_逗叔 | 来源:发表于2019-04-28 13:14 被阅读96次

    痛点

    Vant没有提供内置的表单验证,但是Field输入框提供了errorerror-message这两个API。
    https://youzan.github.io/vant/#/zh-CN/field

    image.png
    <van-cell-group>
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入用户名"
        error
      />
      <van-field
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        error-message="手机号格式错误"
      />
    </van-cell-group>
    

    虽然这样也可以自己手动验证,但是对于页面中有多个验证时弄起来还是比较烦的,最好是能有一个验证插件统一搞定这一切。

    VeeValidate

    基于上面的痛点,我在项目中使用了 VeeValidate 来作为验证插件,当然还有一些其他的验证插件,这个看个人喜好,你想用什么都可以,反正思路都是一样的。

    //VeeValidate的基础用法
    <input v-validate="'required|email'" name="email" type="text">
    <span>{{ errors.first('email') }}</span>
    

    https://baianat.github.io/vee-validate/guide/getting-started.html#basic-example

    开搞

    1.安装VeeValidate

    npm install vee-validate --save
    

    2.修改main

    我这里是新建了一个validate.js文件来单独处理的,因为我还有一些其他自定义的验证,如果只是测试直接在main.js中修改就好了。

    image.png
    import Vue from "vue";
    import VeeValidate, { Validator } from "vee-validate";
    Vue.use(VeeValidate);
    

    3.页面中使用

    <van-field
              v-model="form.contactPhone"
              v-validate="'required|mobile'"   //mobile是我自定义的
              name="contactPhone" //特别注意一定得给name
              :error-message="errors.first('contactPhone')" //错误信息
              :error="errors.has('contactPhone')" //是否有错误
              label="联系人电话"
              placeholder="请输入手机号码"
            >
    

    mobile自定义验证代码,我也把常用的正则表达式整理了一下。https://form-validate.github.io/form-validate/

    // 手机号码验证
    Validator.extend("mobile", {
      getMessage: () => `请输入正确的手机号码`,
      validate: value =>
        value.length === 11 &&
        /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
          value
        )
    });
    

    4. 查看效果

    image.png

    5. 汉化

    import zh_CN from "vee-validate/dist/locale/zh_CN";
    Validator.localize("zh_CN", zh_CN);
    
    image.png
    中文是显示了,但是提示会把input框的name值带上,看着特别的别扭,下面就来把它搞掉。

    6. 搞掉丑陋的提示

    先去看官网的中文文件是怎么写的,然后进行修改
    https://github.com/baianat/vee-validate/blob/master/locale/zh_CN.js

    image.png
    源码中只需要把field设置成空就好了,或者直接删除,我这里选择设置成空,因为删除的话比较多,有点麻烦,如果以后还需要改什么也不太方便。

    7. 完整代码---validate.js文件

    import Vue from "vue";
    import VeeValidate, { Validator } from "vee-validate";
    
    Vue.use(VeeValidate);
    
    const formatFileSize = function(size) {
      let units = ["Byte", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
      let threshold = 1024;
      size = Number(size) * threshold;
      let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold));
      return (size / Math.pow(threshold, i)).toFixed(2) * 1 + " " + units[i];
    };
    const fieldName = ""; //原来的i18n的fieldName会显示绑定的name值,就是英文,实际项目中不需要
    
    Validator.localize("zh_CN", {
      name: "zh_CN",
      attributes: {},
      messages: {
        _default: () => `${fieldName}无效`,
        after: (field, [target]) => `${fieldName}必须在${target}之后`,
        alpha_dash: () => `${fieldName}能够包含字母数字字符、破折号和下划线`,
        alpha_num: () => `${fieldName}只能包含字母数字字符`,
        alpha_spaces: () => `${fieldName}只能包含字母字符和空格`,
        alpha: () => `${fieldName}只能包含字母字符`,
        before: (field, [target]) => `${fieldName}必须在${target}之前`,
        between: (field, [min, max]) => `${fieldName}必须在${min}与${max}之间`,
        confirmed: (field, [confirmedField]) =>
          `${fieldName}不能和${confirmedField}匹配`,
        credit_card: () => `${fieldName}格式错误`,
        date_between: (field, [min, max]) => `${fieldName}必须在${min}和${max}之间`,
        date_format: (field, [format]) => `${fieldName}必须符合${format}格式`,
        decimal: (field, [decimals = "*"] = []) =>
          `${fieldName}必须是数字,且能够保留${
            decimals === "*" ? "" : decimals
          }位小数`,
        digits: (field, [length]) =>
          `${fieldName}必须是数字,且精确到${length}位数`,
        dimensions: (field, [width, height]) =>
          `${fieldName}必须在${width}像素与${height}像素之间`,
        email: () => `${fieldName}不是一个有效的邮箱`,
        ext: () => `${fieldName}不是一个有效的文件`,
        image: () => `${fieldName}不是一张有效的图片`,
        included: () => `${fieldName}不是一个有效值`,
        integer: () => `${fieldName}必须是整数`,
        ip: () => `${fieldName}不是一个有效的地址`,
        length: (field, [length, max]) => {
          if (max) {
            return `${fieldName}长度必须在${length}到${max}之间`;
          }
          return `${fieldName}长度必须为${length}`;
        },
        max: (field, [length]) => `${fieldName}不能超过${length}个字符`,
        max_value: (field, [max]) => `${fieldName}必须小于或等于${max}`,
        mimes: () => `${fieldName}不是一个有效的文件类型`,
        min: (field, [length]) => `${fieldName}必须至少有${length}个字符`,
        min_value: (field, [min]) => `${fieldName}必须大于或等于${min}`,
        excluded: () => `${fieldName}不是一个有效值`,
        numeric: () => `${fieldName}只能包含数字字符`,
        regex: () => `${fieldName}格式无效`,
        required: () => `${fieldName}不能为空`,
        size: (field, [size]) => `${fieldName}必须小于${formatFileSize(size)}`,
        url: () => `${fieldName}不是一个有效的url`
      }
    });
    
    // 手机号码验证
    Validator.extend("mobile", {
      getMessage: () => `请输入正确的手机号码`,
      validate: value =>
        value.length === 11 &&
        /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
          value
        )
    });
    

    8. 最终效果

    image.png

    9. 补充

    一般都是点提交的时候会验证是否有错误,可以使用validateAll来验证,当然也可以指定验证,具体的可以看官方文档。

       methods: {
        onSubmit() {
          // 验证
          this.$validator.validateAll().then(result => {
            if (result) {
             //axios提交
            }
          });
        }
      }
    

    相关文章

      网友评论

        本文标题:Vant UI + VeeValidate实现表单验证

        本文链接:https://www.haomeiwen.com/subject/vwornqtx.html