element-ui《input》输入框效验

目录

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

1. 过滤字母e，

2. 只能输入正整数 

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

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

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

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

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

7. 禁止 / 只允许 输入中文

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

9. 禁止输入特殊字符

10. 只允许输入英文

11. 常见表单校验

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

13. 只允许输入中文，英文，数字 / 空格 / 小数点

14. 空格校验

---

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

1. 过滤字母e，

2. 只能输入正整数 

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

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

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

方法-：
  v-model="scope.row.weight"
  οninput="value = Number(value) || 0"
>
方法二：
  v-model="scope.row.weight"
  οninput="value=value.replace(/\D|^0/g, '')"
>
方法三：
  v-model="scope.row.weight"
  οninput="value=value.replace(/[^\d]|^[0]/g, '')"
>

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

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

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

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

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

7. 禁止 / 只允许 输入中文

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

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

     v-model.trim="form.userNumber"
     placeholder="请输入用户编号"
     clearable
     οnkeyup="this.value=this.value.replace(/[^\w]/g,'')"
>

9. 禁止输入特殊字符

10. 只允许输入英文

11. 常见表单校验

// utils.js
// 全局函数
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);
}
export function validateQQ(str) {
  // 检查QQ格式
  return /^[1-9][0-9]{4,}$/.test(str);
}
// 检查验证码格式
export function validateSmsCode(str) {
  return /^\d4$/.test(str);
}
// 校验 URL
export function validURL(url) {
  const reg =
    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}
// 校验特殊字符
export function specialCharacter(str) {
  const reg = new RegExp(
    // eslint-disable-next-line quotes
    "[`~!@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
  )
  return reg.test(str)
}

12. 输入非数字组合(登录账号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;
      }

13. 只允许输入中文，英文，数字 / 空格 / 小数点

14. 空格校验

// 去除所有的空格：

// 去除两头的空格：
方法一：
方法二：
// 去除左侧的空格：

// 去除右侧的空格：