输入框验证可以输入正负数,小数保留两位小数

输入框验证可以输入正负数,小数保留两位小数

在使用input输入金额时,对金额做校验

<input class="layui-input" name="balance" id="clientinfo_balance" onkeyup="clearinteger(this)" lay-verify="required" autocomplete="off" />
// 正负数,小数保留2位小数
function clearinteger(obj){
    obj.value = obj.value.replace("-.","%$%").replace(/\-\./g,"").replace("%$%","-");
    obj.value = obj.value.replace(".-","$#$").replace(/\.\-/g,"").replace("$#$",".");
    obj.value = obj.value.replace(/[^-\d.]/g,""); //清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字而不是
    obj.value = obj.value.replace(/^(0[0-9])/,""); //验证首位出现类似于01,02的金额
    obj.value = obj.value.replace(/^-(0[0-9])/,""); //验证首位出现类似于-01,-02的金额
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只保留第一个. 清除多余的
    obj.value = obj.value.replace("-","$%$").replace(/\-/g,"").replace("$%$","-");//只保留第一个- 清除多余的
    obj.value = obj.value.replace(/\d{1,}-|\d{1,}\.\d{1,2}-/,"");//不能在数字后面输入-
    // obj.value = obj.value.replace(/^(-)?(\d+)\.(\d\d\d).*$/,'$1$2.$3'); //只能输入三位小数
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
}
// 验证正负整数
function getinteger(obj){
    obj.value = obj.value.replace("-","%$%").replace(/\-/g,"").replace("%$%","-");
    obj.value = obj.value.replace(/[^-\d]/g,""); //清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字而不是
    obj.value = obj.value.replace(/^(0[0-9])/,""); //验证首位出现类似于01,02的金额
    obj.value = obj.value.replace(/^-(0[0-9])/,""); //验证首位出现类似于-01,-02的金额
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只保留第一个. 清除多余的
    obj.value = obj.value.replace("-","$%$").replace(/\-/g,"").replace("$%$","-");//只保留第一个- 清除多余的
    obj.value = obj.value.replace(/\d{1,}-|\d{1,}\.\d{1,2}-/,"");//不能在数字后面输入-
}
### 配置ElementUI Input组件以确保仅能输入正数和小数 为了使 ElementUI 的 `el-input` 组件能够接受并验证只有正数(包括整数和小数),可以通过自定义校验规则以及利用 Vue 的计算属性或监听器来实现这一功能。 #### 方法一:使用 `el-input-number` 对于只需要控制数值范围的情况,可以直接采用 `el-input-number` 控件,并设置其最小值为0,这样就天然地阻止了负数的输入: ```html <template> <div class="demo"> <el-input-number v-model="num" :min="0"></el-input-number> </div> </template> <script> export default { data() { return { num: null, }; }, }; </script> ``` 这种方法简单易行,适用于大多数场景下的需求[^1]。 #### 方法二:通过自定义指令与正则表达式过滤非法字符 如果希望保留标准文本框外观而不仅仅是数字计步器,则可以在普通的 `el-input` 上应用更复杂的逻辑处理。这里提供了一种基于自定义指令的方式来进行实时的数据净化: ```javascript // main.js 中注册全局指令 Vue.directive('positive-float', { inserted(el, binding) { function checkValue(value){ const regPosFloat = /^(?!0+(?:\.0+)?$)\d+(\.\d{1,2})?$/; if (!regPosFloat.test(value)) { el.value = value.replace(/^(?!0+(?:\.0+)?$)(\d*)(\.\d{3,})$/, '$1$2').replace(/^(-|\D)/g,''); } } // 初始化时清理一次可能存在的不合法数据 checkValue(el.value); // 添加键盘事件监听,在每次按键后立即执行合法性检测 el.addEventListener('input', () => {checkValue(el.value)}); } }); ``` 接着就可以像下面这样在模板里调用了: ```html <template> <div class="demo"> <!-- 使用v-positive-float来自定义行为 --> <el-input v-model="price" placeholder="请输入价格..." v-positive-float></el-input> </div> </template> <script> export default { data() { return { price: '', }; }, }; </script> ``` 此方案不仅限定了只能录入有效的正浮点数,还额外支持最多两位小数位精度[^2]。 #### 方法三:结合 Form 表单验证机制 当上述两种方式不足以满足特定业务需求时,还可以考虑借助于整个表单项级别的验证策略。即先让前端尽可能宽松地接收用户的任何输入尝试,再依靠提交前的最后一道防线——Form Validation API 对最终结果做严格审查。具体做法是在创建对应的字段规则对象时加入专门针对非负实数类型的判断条件: ```javascript rules: { amount: [ { required: true, message: '此项不能为空' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式(可选至多两位小数)', trigger: ['blur'] } ] } ``` 以上三种途径各有优劣,可以根据实际应用场景灵活选用最合适的解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值