el-input输入框只能输入中文，英文，邮箱，手机号

el-input输入框只能输入中文，英文，邮箱，手机号

 

1.设置限制只能输入中文
　　校验中文的正则：/^[\u4e00-\u9fa5]+$/

rules: {
  chineseName: [
    { required: true, message: "请输入中文名", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
          callback(new Error("请输入中文"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

2.设置限制只能输入英文字母 不区分大小写
校验英文的正则：/[a-zA-z]$/

rules: {
  name: [
    { required: true, message: "请输入英文名", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/[a-zA-z]$/.test(value) == false) {
          callback(new Error("请输入英文"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

3.设置限制只能输入邮箱
校验邮箱的正则：/^([a-zA-Z0-9]+[||.]?)[a-zA-Z0-9]+@([a-zA-Z0-9]+[||.]?)[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/

rules: {
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) == false) {
          callback(new Error("请输入邮箱"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

4.设置限制只能输入手机号
校验手机号的正则：/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i

rules: {
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) == false) {
          callback(new Error("请输入手机号"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

5. 设置数字，保留两位小数

<el-input size="small" 
 
onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/)"
 
onafterpaste="this.value=this.value.match(/\d+\.?\d{0,2}/)"
 
v-model="scope.row.abc"
 
maxlength="9">
</el-input>

6. 设置只允许大写字母和数字

正则：/^[0-9A-Z]+$/

rules: {
  card: [
    { required: true, message: "请输入批次号", trigger: "blur" },
    {
        validator: function (rule: any, value: any, callback: any) {
            if (/^[0-9A-Z]+$/.test(value) === false) {
                callback(new Error("仅限大写字母和数字"));
            } else {
                //校验通过
                callback();
            }
        },
        trigger: "blur"
    }
  ],
}

 7.只允许输入数字，最小值为1

 

 <el-input style="width: 100%" onkeyup="value=value.replace(/[^\d]/g,'');if(value<=0)value=null" v-model="ruleFiltersDto.rangeMinimum" :disabled="props.isView" placeholder="1"/>