el-input相关校验

1. 只允许输入数字,且不大于100,两位小数

 const scoreWeightValidate = (rule, value, callback) => {
      const testReg = /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/;
      if (testReg.test(value)) {
        callback();
      } else {
        callback(new Error("0-100的数字,仅支持两位小数点"));
      }
    };

1.1 仅允许输入数字的输入框

 


1.1.1 仅允许输入0-100 的数字,且保留两位小数



tradeLvInput(value) {
  if (+value >= 100) {
     this.tradeLv = 100;
     return;
  }
  this.tradeLv = value
   .replace(/^\D*(\d*\.?\d{0,2})?.*$/, "$1")
   .replace(/^(\d{0,2})?\d*$/, "$1");
}

1.2 仅允许输入数字,可包含小数点

    onkeyup="value=value.replace(/[^\d\.]/g, '') 
                .replace(/^\./g, '') 
                .replace(/\.{2,}/g, '.') 
                .replace('.', '$#$') 
                .replace(/\./g, '')
                .replace('$#$', '.')"

1.2.1 仅允许输入数字,保留两位小数

 .replace(/[^\-\d{1,}.\d{1,}|\-\d{1,}]/g, "")
    .replace(".", "$#$")
    .replace(/\./g, "")
    .replace("$#$", ".")
    .replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
function num(obj){
			obj.value = obj.value.replace(/[^\d.-]/g,""); //清除"数字"和"."以外的字符
			obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是.字
			obj.value = obj.value.replace(/^[0]/g,"");//验证第一个字符是0字
			obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
			obj.value = obj.value.replace(/\-{2,}/g,"-"); //只保留第一个, 清除多余的
			obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
			obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
		}
  

1.3 大于0 的数字,可包含两位小数

 onkeyup="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, "$1");
          
  

2.0-100的数字校验

  const scoreWeightValidate = (rule, value, callback) => {
      const testReg = /^(?:[1-9]?\d|100)$/;
      if (testReg.test(value)) {
        callback();
      } else {
        callback(new Error("0-100的数字"));
      }
    };

scoreWeight: [
          { required: true, message: "请输入打分权重", trigger: ["blur", "change"] },
          {
            validator: scoreWeightValidate,
            trigger: ["blur", "change"]
          }
        ]

3. 手机号校验

 const checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        // 合法的手机号码
        return cb();
      }
      cb(new Error("手机号码格式不正确"));
    };


  phoneCode: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { validator: checkMobile, trigger: ["blur", "change"] }
        ],

4. 邮箱的校验

 const checkEmail = (rule, value, callback) => {
      const mailReg = /([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      if (mailReg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的邮箱格式'))
      }
    };

你可能感兴趣的:(element-ui,vue.js,javascript,前端)