就是意思一個(gè)輸入框里面，按VID/PID格式輸入,VID和PID最大長(zhǎng)度是4,最多50組

1、頁面代碼

?<el-form ref="ruleForm" :model="tempSet" :rules="rules" label-position="right">

? ? ? ? <!-- 最多 50組，每組9個(gè)字符加逗號(hào)分隔，是10個(gè)，最后一個(gè)不需要字符就是，就是499個(gè) -->

? ? ? ? <el-form-item label="設(shè)備VID/PID" label-width="100px" prop="vpid" :error="errForm.vpid.error">

? ? ? ? ? <el-input id="vpid" v-model.trim="tempSet.vpid" placeholder="按VID/PID形式輸入，最多輸入50組，英文逗號(hào)分隔" maxlength="499" type="textarea" :rows="6" style="width: 358px;" />

? ? ? ? </el-form-item>

? ? ? </el-form>

2、非必填的正則

rules: {

? ? ? ? vpid: [

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

? ? ? ? ]

? ? ? },

3、頁面編寫正則

如圖這個(gè)位置?

4、代碼如下：

? // 非必填項(xiàng) 正則校驗(yàn)

? ? 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 最長(zhǎng)4位 這種形式的字符，如果不是，返回false

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

? ? ? ? ? ? ? return false;

? ? ? ? ? ? }

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

? ? ? ? ? ? ? // 切割開來，每個(gè)都做對(duì)比，可以為0，可以小于等于255，但是不可以0開頭的倆位數(shù)

? ? ? ? ? ? ? // 只要有一個(gè)不符合就返回false

? ? ? ? ? ? ? if (num.length > 4) {

? ? ? ? ? ? ? ? // _this.$message.error('VID和PID最大長(zhǎng)度是4')

? ? ? ? ? ? ? ? return false;

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

? ? ? ? ? ? ? ? // _this.$message.error('VID和PID若輸入其中一個(gè)，另外一個(gè)不能為空')

? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? return true;

? ? ? ? ? ? });

? ? ? ? ? }

? ? ? ? }());

? ? ? ? // var test_vips = '123/234';

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

? ? ? ? // ?多組 VID/PID，VID/PID的正則處理，用逗號(hào)(,)隔開

? ? ? ? var test_vips = value;

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

? ? ? ? ? return isViDVip(vip); // 先將字符串按照逗號(hào)分成數(shù)組，再校驗(yàn)就可以了

? ? ? ? });

? ? ? ? // alert(isTrue); // isTrue 返回true，上面的vid/pid 全部正確以逗號(hào)分隔 最多50組

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

? ? ? ? ? return callback(new Error('按VID/PID格式輸入,VID和PID最大長(zhǎng)度是4,最多50組'))

? ? ? ? } else {

? ? ? ? ? return callback();

? ? ? ? }

? ? ? } else {

? ? ? ? return callback()

? ? ? }

? ? }

5、效果圖搞定

?