form表单校验规则及各种输入框校验总结

form表单校验规则及各种输入框校验总结

1. id校验——只允许输入数字，允许输入多个，每个id之间用英文逗号分割，最多输入500个，不允许重复

shopIds: [
   {
      required: true,
      trigger: 'change',
      validator(rule, value){
         if (!value) return [{message: '请添加shopId'}];
         if (!/^\d+(,\d+)*$/.test(value)) {
            return [{message: '请输入数字和逗号，多个数字之间用逗号分隔'}];
         }
         let tempSet = new Set();
         let msg = ''
         value.split(',').forEach(val => {
	         if (tempSet.has(val)) {
	            msg = 'id不能重复'
	            return;
	         } else if (!val) {
	            msg = '请输入正确的id，不能以逗号结尾'
	            return;
	         } else {
	            tempSet.add(val);
	         }
        });
        if (msg) {
           return [{message: msg}];
        } else if (value.split(',').length > 500) {
           return [{message: '最大支持500个店铺ID录入'}];
        } else {
           return [];
        }
     }
  }
],

2. 满减金额校验

discount: [{
    validator() {
        if (!vm.couponModel.discount || !vm.couponModel.quota) {
            return [{message: '请填写满减金额'}]
        } else if (vm.couponModel.discount / vm.couponModel.quota > 0.8) {
            return [{message: '优惠力度必须小于等于80%'}]
        } else {
            return []
        }
    },
    trigger: 'blur'
}],

3. 校验范围

promotionNum: [
    {
        required: true,
        trigger: 'change',
        message: '请正确输入晋级数量，范围1-100000'
    }, {
        validator(rule, value){
            if (!value || value > 100000 || value < 1) {
                return [{message: '请正确输入晋级数量，范围1-100000'}];
            } else {
                return [];
            }
        }
    }
],

4. 校验价格两位小数

:filter="priceFilter"

priceFilter(num) {
    if (!num) {
        return true
    } else if (/^(\d*\.?\d{0,2})$/.test(num) && num <= 9999) {
        return true
    }
    return false
},

5. 校验一位小数

:filter="ratioFilter"

ratioFilter(value){
    if (!value) {
        return true
    } else if (/^\d*\.?\d?$/.test(value) && value <= 80) {
        return true
    }
    return false
},