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. 只允许输入数字和小数 / 数字和空格

1.  
   oninput ="value=value.replace(/[^0-9.]/g,'')"
2.  
   oninput ="value=value.replace(/^[\d\s] $/g,'')"

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

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

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

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

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

1.  
   <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>
2.  
    
3.  
   numberChange (val, max) {
4.  
   this.$nextTick(() => {
5.  
   this.count = Math.min(parseInt(val), max)
6.  
   })
7.  
   }

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

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

 8. 禁止输入中文

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

9. 常见表单校验

1.  
   // utils.js
2.  
    
3.  
   // 全局函数
4.  
   export function validateMobile(str) {
5.  
   // 检查手机号码格式
6.  
   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(
7.  
   str,
8.  
   );
9.  
   }
10.  
     
11.  
    export function validateEmail(str) {
12.  
    // 检查邮箱格式
13.  
    return /^([A-Za-z0-9_\-.]) @([A-Za-z0-9_\-.]) \.([A-Za-z]{2,4})$/.test(str);
14.  
    }
15.  
     
16.  
    export function validatePhone(str) {
17.  
    // 检查电话格式
18.  
    return /^(0\d{2,4}-)?\d{8}$/.test(str);
19.  
    }
20.  
     
21.  
    export function validateQQ(str) {
22.  
    // 检查QQ格式
23.  
    return /^[1-9][0-9]{4,}$/.test(str);
24.  
    }
25.  
     
26.  
    // 检查验证码格式
27.  
    export function validateSmsCode(str) {
28.  
    return /^\d4$/.test(str);
29.  
    }

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

1.  
   // 非纯数字非纯字母 /^(?![0-9] $)[0-9A-Za-z|a-zA-Z]{6,16}$/
2.  
   let userNameReg = /^(?![0-9] $)[0-9A-Za-z|a-zA-Z]{6,16}$/;
3.  
   if (!userNameReg.test(form.userName)) {
4.  
   this.$message.warning('请输入6-16位的非纯数字登录账号~');
5.  
   return false;
6.  
   }

 11. 只允许输入数字和英文

1.  
   <el-input
2.  
   v-model.trim="form.userNumber"
3.  
   placeholder="请输入用户编号"
4.  
   clearable
5.  
   onkeyup="this.value=this.value.replace(/[^\w]/g,'')"
6.  
   ></el-input>

这篇好文章是转载于：学新通技术网