element 输入框只可以输入正整数

element 输入框只可以输入正整数

今天再项目中用到正则，那就整理一下正则和相关的一下知识点哈~✿✿ヽ(°▽°)ノ✿

一、表单中实现输入框只可以输入正整数

写法一：

<el-form-item label="时限2" prop="time2">
    <el-input :value="params.time2" @input="changeValue" placeholder="请输入" clearable type="text" />
</el-form-item>

在input方法中定义一个校验的方法，当输入的时候调用方法去校验是否合法。

input 事件 和 change事件的区别。
input事件是指当输入框内容发生改变时就会触发，实时触发，不用失去焦点。
change事件指的是当输入框内容发生改变时触发的事件，前提是失去了焦点，才会触发到change事件。

changeValue(value) {
     this.params.time2 = /^[0-9]*$/.test(parseInt(value)) ? String(parseInt(value)).replace(".", "") : ""
 }

写法二：
这个也能满足不能输入小数点的整数，自动删除小数点。

<el-form-item label="时限" prop="time1">
   <el-input
        v-model="ruleForm.time1"
        type="text"
        onkeyup="this.value=this.value.replace(/\D/g,'')"
        onafterpaste="this.value=this.value.replace(/\D/g,'')"
    ></el-input>
</el-form-item>

this.value 表示此输入框的值。/\D/g为正则表达式，用来匹配所有非数字字符。将输入为非数字的字符替换为空。

onkeyup：当键盘按键抬起时
onafterpaste:粘贴触发

这两种写法直观的区别就是第一种会看不到 ‘.’，第二种能看到 ‘.’ 输入的瞬间出现然后消失。

写法三（v-model.number ，存在问题）：

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

官方的解释如上，我之前在用的时候经常觉得没有效果，便记录一下。

 <el-form-item label="年龄" prop="age">
     <el-input v-model.number="params.age" type="age" placeholder="请输入" />
 </el-form-item>

age: [
  { required: true, message: "年龄不能为空" },
    { type: "number", message: "年龄必须为数字值" }
]

正常允许输入小数点，但是先输入’.'在输入数字3就会变成0.3。
补充几点：

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type=”number” 时，HTML 输入元素的值也总会返回字符串。

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">

关于v-model的属性推荐：v-model 自带绑定的number 、lazy 、debounce属性

二、输入框限制输入6位数字且去除空格

maxlength 原生属性，最大输入长度 直接使用这个参数，会导致 用户在复制粘贴中…举个栗子：
用户输入 “ 123456”（有两个空格） —> 赋值粘贴之后会变成 “1234”

以下写法就避免了这种问题：

<el-input
  v-model="searchForm.lastSixNum"
   :number-format="{
     maxLength: 6,
     negative: false,
     decimal: false,
   }"
   clearable
   placeholder="数字后六位搜索"
 />

三、扩展

element 中 rules添加正则

一定要记住在表单上要绑定 :rules=“rules”

<el-form-item label="手机号" prop="idCard">
   <el-input v-model="params.idCard" type="text" placeholder="请输入" />
</el-form-item>

rules: {
	 idCard: [
	      { required: true, message: "请输入证件号", trigger: "blur" },
	      {
	          pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
	          message: "请输入正确的证件号"
	      }
	  ]
	}

大概就是这样，具体可以看element的官方文档。

常用正则表达式

  isEmil: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, // 校验邮箱
  isPhoneNumber: /^1[3456789]\d{9}$/, // 手机号码验证
  isMobileNumber: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, // 固定电话号码验证
  isIdCard: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1- 9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/, // 身份证号码验证
  isMoney: /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/, // 金额格式验证(最大金额99999999.99)
  isCreditCard: /^[0-9]*$/, // 银行卡号验证
  isZHCNUserName: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, // 大陆居民姓名验证
  isEmoJi: /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/, // 表情验证
  isChinese: /[^\u4e00-\u9fa5]+$/, // 汉字校验--数字也会返回true
  isDecimalTwo: /^[0-9]+(.[0-9]{2})?$/, // 两位小数正实数校验
  isDecimalOneOrTwo: /^[0-9]+(.[0-9]{1,2})?$/, // 1~2位小数正实数校验
  isEnSpecialChar: /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, // 英文特殊字符校验
  isCnSpecialChar: /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im, // 中文特殊字符校验
  isHighPassword: /(?=.*[a-zA-Z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/;'[\]])[a-zA-Z\d`~!@#$%^&*()_+<>?:"{},.\/;'[\]]{8,16}/i, // 8-16位由数字字母或英文特殊字符(三者都要有)的密码校验
  isPassword: /^[A-Za-z0-9`~!@#$%^&*()_+<>?:"{},.\/;'[\]]+$/, // 由数字字母英文特殊字符任意组合的密码校验
  isUrl: /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/ //是否为url链接

---

不够完整，有缘再补哈~
有缘再见ヾ(￣▽￣)Bye~Bye~