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

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

1. 过滤字母e，在js中属于数字，但是正则表达式 d 是拦不住字母e 的

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

2. 只能输入正整数

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

3. 只允许输入数字和小数 / 数字和空格

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

4. 只允许输入正整数且不能以0开头

<el-input
  v-model="scope.row.weight"
  oninput="value = Number(value) || 0"
>

5. 允许输入小数点后几位

// 保留一位小数
oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf(.)>0){value=value.slice(0,value.indexOf(.)+2)}" 
 
// 若需要保留N位小数，则把2 改为 1 + n即可

6. 设置范围，最大值，最小值

<el-input min="0" max="100" type="number" @input="numberChange($event, 100)" @change="numberChange($event, 100)" onKeypress="return (/[d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input> 

numberChange (val, max) {
   this.$nextTick(() => {
      this.count = Math.min(parseInt(val), max)
    })
}

7. 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: 请输入正确额格式,可保留两位小数 }
        ]
      }

8. 禁止输入中文

onkeyup="this.value=this.value.replace(/[u4E00-u9FA5]/g,)"

9. 常见表单校验

10. 输入非数字组合(登录账号6-16位)

// 非纯数字非纯字母 /^(?![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>