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 @   幻影之舞  阅读(3562)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示