網(wǎng)頁工具東莞優(yōu)化排名公司
就是意思一個(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、效果圖搞定
?