#说明

Element-ui使用过程中,一些需求总是要求我们对输入控件的键入内容进行限制,此笔记就将记录这些常用操作

1、输入框限制只能输入数字或小数点

是在输入时限制每次输入的内容而不是整体校验

Ⅰ- 手动加正则限制

  • 输入框中增加 oninput 属性就能限制,同理在onchange事件中也能生效
  • 带小数点的纯数字正则校验:/[^\d^.]+/g,/[^0-9.]/g
  • 纯数字正则校验:/[^\d.]/g
  1. <el-input
  2.   oninput="value=value.replace(/[^\d^.]+/g,'')"
  3.   v-model="form.operateExamScore1"
  4. />

Ⅱ - 将输入框type设置为number

  1. <el-input
  2.   type="number"
  3.   v-model="form.operateExamScore1"
  4. />

Ⅲ - el-input type=number时字数限制不起作用

ue使用element-ui的el-input 时，不设置type属性，maxlength是可以正常限制字数。

但如果想要下面这样的效果ElementUI关于限制输入校验 - 图1

需要让type=“number” ，这个时候maxlength就不起作用了。
解决方法是改成 oninput 方法监听：加入oninput="if(value.length > 最大长度) value = value.slice(0,最大长度)"

  1. <el-form-item >
  2.   <el-input
  3.     type="number"
  4.     oninput="if(value.length > 4) value = value.slice(0,4)"
  5.     v-model="scope.row.operateExamScore2"
  6.   />
  7. </el-form-item>

2、校验输入格式为数字且为最多能带两位小数点的正数

整体校验数据的内容,一般在form表单组件中使用

```javascript // 面积正则表单-可根据实际需求对该方法进行调整 const checkAddrArea = (rule, value, callback) => { var patrn = /^\d{1,9}(.{0}|.{1}\d{1,2})?$/ if (patrn.test(value)) { return callback() } else { return callback(new Error(‘只能输入数字并且最多两位小数’)) } }

const relus = { addrArea: [{ required: true, message: ‘必填项不可为空’, trigger: ‘blur’ }, { trigger: ‘blur’, validator: checkAddrArea }], } ```