js 输入框输入限制正整数,正数,负数,小数

文章介绍了四种使用JavaScript和正则表达式的方法来限制HTML输入框的输入内容,确保用户只能输入正整数、禁止以0开始的数字、正数及小数。方法涵盖了一般正整数、小数精度控制以及负数的情况。提供的函数和事件处理包括oninput和onbeforepaste,用于实时校验和格式化输入值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方法一:实现输入框只能输入正整数,输入同时禁止了以0开始的数字输入,防止被转化为其他进制的数值。

<input type='text' οninput="value=value.replace(/^(0+)|[^\d]+/g,'')">

方法二: 实现输入框只能输入正整数

<input type="text" name="price" id="price" value=""

onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

οninput="value=value.replace(/[^\d.]/g,'')" />

方法三:限制文本框只能输入正数,负数,小数

<input type="text" οninput="value=value.replace(/[^\-?\d.]/g,'')" />

方法四:限制文本框只能输入正数,小数精确2位

<input οninput="MachineSellSortInfoDlg.checkNumber(this)" MAXLENGTH="5" type="text" class="form-control">

//只能输入0到100的小数,小数点后只能输入两位

function checkNumber(obj)

{

obj.value=obj.value.toString().match(/^\d+(?:\.\d{0,2})?/) //只能输入2位小数

if (obj.value.indexOf('.') < 0 && obj.value != '') { //输入替换,如输入05,直接替换为5,防止出现01,02这种情况

obj.value = parseFloat(obj.value);

}

}

input框对字母、汉字、符号的一些判别

### 配置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、付费专栏及课程。

余额充值