js 正则表达式 验证 :页面中一个输入框,可输入1个或多个vid/pid,使用英文逗号隔开...

就是意思一个输入框里面,按VID/PID格式输入,VID和PID最大长度是4,最多50组

1、页面代码

 

       

       

         

       

     

2、非必填的正则

rules: {

        vpid: [

          { required: false, validator: validatorUsb, trigger: 'blur' }

        ]

      },

3、页面编写正则

如图这个位置 

js 正则表达式 验证 :页面中一个输入框,可输入1个或多个vid/pid,使用英文逗号隔开..._第1张图片

4、代码如下:

  // 非必填项 正则校验

    var validatorUsb = (rule, value, callback) => {

      if (value) {

        //   一组VID/PID  逻辑处理

        var isViDVip = (function() {

          var regexp = /[\/]/;

          return function(value) {

            var valid = regexp.test(value);

            if (!valid) { // 首先必须是 xxxx/xxxx 最长4位 这种形式的字符,如果不是,返回false

              // _this.$message.error('按VID/PID格式输入')

              return false;

            }

            return value.split('/').every(function(num) {

              // 切割开来,每个都做对比,可以为0,可以小于等于255,但是不可以0开头的俩位数

              // 只要有一个不符合就返回false

              if (num.length > 4) {

                // _this.$message.error('VID和PID最大长度是4')

                return false;

              } else if (num === '') {

                // _this.$message.error('VID和PID若输入其中一个,另外一个不能为空')

                return false;

              }

              return true;

            });

          }

        }());

        // var test_vips = '123/234';

        // alert(isViDVip(test_vips)); // 返回true

        //  多组 VID/PID,VID/PID的正则处理,用逗号(,)隔开

        var test_vips = value;

        var isTrue = test_vips.split(',').every(function(vip) {

          return isViDVip(vip); // 先将字符串按照逗号分成数组,再校验就可以了

        });

        // alert(isTrue); // isTrue 返回true,上面的vid/pid 全部正确以逗号分隔 最多50组

        if (!isTrue || test_vips.split(',').length > 50) {

          return callback(new Error('按VID/PID格式输入,VID和PID最大长度是4,最多50组'))

        } else {

          return callback();

        }

      } else {

        return callback()

      }

    }

5、效果图搞定

js 正则表达式 验证 :页面中一个输入框,可输入1个或多个vid/pid,使用英文逗号隔开..._第2张图片

 

你可能感兴趣的:(javascript,vue.js,前端,正则表达式)