Elementui el-input 输入框校验以及校验表单校验

input输入框验证，表单各种正则校验

html中pattern使用

<input pattern="[a-z]{3}" name="test">

1. 监听控制输入框长度

userName: [
  {required: true, message: '应急人员名称不能为空', trigger: 'blur'},
  { min: 2, message: '长度不小于 2 个字符', trigger: 'blur' },
  { max: 10, message: '长度不大于 10 个字符', trigger: ['blur', 'change'] }
],

2. 手机号格式校验

mobile: [
  {required: true, message: '常用联系手机号不能为空', trigger: 'blur'},
  {pattern: /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/, message: '请输入正确的电话号码或者固话号码'}
],

常用的 element-ui el-input 输入框

1. 过滤字母e，在js中属于数字，但是正则表达式 \d 是拦不住字母e 的
2. . 只能输入正整数

<el-input type="number" placeholder="请输入" min="1" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>

el-input type="number" placeholder="请输入" min="1" oninput ="value=value.replace(/[^\d]/g,'')"  v-model.number="count"></el-input>

oninput ="value=value.replace(/[^0-9.]/g,'')"

<el-input
  v-model="scope.row.weight"
  oninput="value = Number(value) || 0"
// 保留一位小数
oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" 
 
// 若需要保留N位小数，则把2 改为 1 + n即可

//form 表单校验输入框只能输入数字和两位小数

rules: {
        giveHour: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' }
        ]
      }


// 全局函数
export function validateMobile(str) {
  // 检查手机号码格式
  return /^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/.test(
    str,
  );
}
 
export function validateEmail(str) {
  // 检查邮箱格式
  return /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/.test(str);
}
 
export function validatePhone(str) {
  // 检查电话格式
  return /^(0\d{2,4}-)?\d{8}$/.test(str);
}


// 非纯数字非纯字母 /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/
    let userNameReg = /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/;
      if (!userNameReg.test(form.userName)) {
        this.$message.warning('请输入6-16位的非纯数字登录账号~');
        return false;
      }
//11. 只允许输入数字和英文
<el-input
	 v-model.trim="form.userNumber"
	 placeholder="请输入用户编号"
	 clearable
	 onkeyup="this.value=this.value.replace(/[^\w]/g,'')"
></el-input>

/^[1-9]\d*$/正则表达式代表意思

^[1-9]表示以1到9的某位数字开头 \d*表示0-9的任意一位或者多位或者一位 $表示以什么结束 这个正则就表示 以1到9的的某位数字开始并以一位或者多位或者零位数字结尾 如 1 、19、 119、 1110、等等