vue input表单限制规则

奚大野...

已于 2022-06-23 14:42:30 修改

阅读量732

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-06-17 09:26:58 首次发布

本文链接：https://blog.csdn.net/qq_41752378/article/details/125299916

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

身高【数字类，有最小值和最大值】

<el-input v-model="dialog.form.pheight" size="medium" type="number" min="0" max="300" prop="pheight" @blur="dialog.form.pheight = dialog.form.pheight < 0?0:dialog.form.pheight > 300?300:dialog.form.pheight" placeholder="请填写"></el-input>

//rules规则：
equipmnetName:[
      {required:false,message:"请输入居住人姓名！"},
      {pattern:/^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/,
        message:"请输入正确的姓名格式",trigger:"blur",
      },
],

手机号码

<el-input v-model="dialog.form.pmobile" size="medium" prop="pmobile" placeholder="请填写" type="number" name="mobile" maxlength="11" @blur="verifyPhone"></el-input>

//methods对象内的方法：
verifyPhone(){
	let value = dialog.form.pmobile;
	if(value){
            if(value.length <= 10 || !reg.test(value)) {
              _this.$message({message: "请填写正确的手机号！！",duration: 2000});
              return;
            }
          }
}

//rules规则：
phone:[
      {required:false,message:"请输入居住人手机号！"},
      {max:11,message:"请输入正确的位数",trigger:"blur"},
      {pattern:/^[1][3,4,5,7,8][0-9]{9}$/,message:"请输入正确的手机号",trigger:"blur"},
],

姓名

var name = document.getElementById('name').value;
if(!(/^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/).test(name)){
  _this.$message.warning('请输入正确的姓名');
  return;
}

身份证号

var IDnumber = document.getElementById("IDnumber").value;
if (!(/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/).test(IDnumber) || (IDnumber.length !== 15 && IDnumber.length !== 18)) {
    _this.$message.warning('请输入正确身份证号！')
    return;
  }