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"/>

 

 

 

 

posted @ 2022-12-26 11:31  幻影之舞  阅读(3714)  评论(0)    收藏  举报