金额、数字输入框对除数字以外字符的输入进行限制和提示 ===>
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: /^1000000000|^1000000000.00|^[+]{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、内容为空时 提示(原本设置)