博客

1. 根目录下新建utils文件，utils新建validator.js

// 校验电话
export const isvalidPhone = (phone) => {
  const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/;
  return reg.test(phone);
};

// 校验带小数点的数字
export const isvalidNumber = (number) => {
  // const reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})$/g; //小数限制0-2位
  const reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
  return reg.test(number);
};

// 校验车牌号
export const isVehicleNumber = (vehicleNumber) => {
  var xreg =
    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
  var creg =
    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
  if (vehicleNumber.length == 7) {
    return creg.test(vehicleNumber);
  } else if (vehicleNumber.length == 8) {
    return xreg.test(vehicleNumber);
  } else {
    return false;
  }
};

2.引入校验规则并使用（template模板中的配置省略，参考element-ui）

import {
  isvalidPhone,
  isvalidNumber,
  isVehicleNumber,
} from "@/libs/util.validator";


export default {
	data() {
	    // 数字校验规则
    	let validatorPrice = (rule, value, callback) => {
      		if (!value) return callback(new Error("请输入金额"));
      		if (!Number(value)) return callback(new Error("请输入数字值"));
      		if (!isvalidNumber(value)) return callback(new Error("请输入正确价格"));
      		callback();
    	};
    	// 车牌号校验规则
    	let validatorCph = (rule, value, callback) => {
      		if (isVehicleNumber(value)) {
        	callback();
      		} else {
        	return callback(new Error("车牌号不正确"));
      		}
    	};
    	// 手机校验规则
    	let validatorDh = (rule, value, callback) => {
      		if (!value) {
        		callback(new Error("请输入电话号码"));
      		} else if (!isvalidPhone(value)) {
        		//判断用户输入的值是否符合规则
        		callback(new Error("请输入正确的11位手机号码"));
      		} else {
        	callback();
      	};

		return {
			rules: {
        		price: [{ required: true, validator: validatorPrice, trigger: "blur" }],
        		cph: [{ required: true, validator: validatorCph, trigger: "blur" }],
        		dh: [{ required: true, validator: validatorDh, trigger: "blur" }],
      		},
		}
    };
	}
}