任务7054字符输入进行限制和提示

359 阅读1分钟

金额、数字输入框对除数字以外字符的输入进行限制和提示 ===>


1、以投资计划的页面为例 ===>

必填的地方如果不填数据就会出现提示

根据我偷偷研究 带 “ * ”就是必填项,具体实现方式如下! 出自 Form 表单 里的属性====> 而提示出现的方式则是由trigger:xx来控制

blur:失去焦点 比如输入框里。校验文本框是否为空

change:数据改变 比如需要手动选择的东西,用change

input: 数据输入 触发事件是输入的时候触发校验

没有进行任何输入时,不会触发change,但一定会触发blur事件


  • v-model.number ==> 只能输入整数,小数点不能输入。
  • oninput="value=value.replace(/[^0-9.]/g,'')" 输入框只能输入数字(包括小数),其他字符不能输入进input框。
  • 使用正则 pattern:/^[a-z]+$/,只能输入字母!
  • 使用正则 pattern: /^10000000001000000000.0|^1000000000.0|^1000000000.00[+]0,1(\d0,9)|^[+]{0,1}(\d{0,9})|^[+]{0,1}(\d{0,9}.\d{1,2})$/,可保留两位小数
  • 表单验证规则: 自定义检查方法.方法名(checkfun) 、参数( rule, value, callback ),检测成功或不成功都需要手动调用 callback , 验证不成功时 callback(new Error('提示信息')) :注意 当在下面的对象中有message时则验证失败只会显示message的值 ====> { validator: 方法名(checkfun), trigger: 'blur' }

第一步:在该input框上绑定value值,参数和v-model的一致

设置原始数据为空 ( infromationParams 为el-form上绑定的model名)

在最外层form上绑定rules(源代码就有),在return里面获取返回值 最后在data中声明

最终效果如图 =====>

1、“对非数字字符进行限制和提示 ====> ”

2、可以输入小数

3、内容为空时 提示(原本设置)