解决element-ui表单中限制输入纯数字的问题

博客作者分享了解决数字输入框在谷歌、火狐和QQ浏览器间兼容性问题的方法。原先使用elementUI的number类型输入框无法统一限制数字长度,于是改用传统input标签,并通过oninput事件配合正则表达式限制输入,确保只允许数字并限制长度。此改动不仅解决了兼容性问题,还保持了界面样式的一致性。

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

【问题】

输入框里面只能输入数字并且限制输入数字的长度,一开始使用的elementUI的组件,但是这个组件的数字限制不能同时适配于谷歌、火狐和QQ浏览器。
在这里插入图片描述

 	<p>
          最高正确率:
          <el-input
           type="number"
            class="el-dialog-input"
            placeholder="请输入最高正确率"
            maxlength="11"
               v-model="addHighAccuracy"
          ></el-input>
        </p>

【更改】

我直接用传统的input输入框代替了elementUI中的el-input输入框,然后再修改样式,做成和element差不多的样式就完美的解决了所有的问题。

 <p>
          最高正确率:
          <input
            oninput="value=value.replace(/[^\d]/g,'')" 
            class="el-dialog-input"
            placeholder="请输入最高正确率"
            maxlength="10"
                v-model="editHighAccuracy"
          >
 </p>
        <div style="margin: 15px 0"></div>
.el-dialog-input {
  width: 50%;
  height:30px;
  border-radius: 5px;//设置圆角框
  color: #606266;
  border:0.1px solid #dcdfe6;//设置圆角框的边框颜色
  outline:none;
  padding: 0 15px;
}
.word {
  margin-left: 30px;
}

在这里插入图片描述

在Vue3中结合Element-UI进行表单验证,如果你想要检查输入是否为数字,你可以使用Element-UI提供的`el-form`组件的`rules`选项,并利用自定义验证函数或者内置的正则表达式验证。下面是一个示例: ```javascript <template> <el-form :model="formData" ref="formRef"> <el-form-item label="数字字段" prop="numberField"> <el-input v-model.number="formData.numberField"></el-input> </el-form-item> <!-- ... 其他表单--> </el-form> </template> <script setup> import { defineProp } from 'vue'; import { required, validator } from 'element-plus验证'; // 自定义验证规则 const isNumeric = (rule, value) => { return Number.isInteger(value) || value === ''; }; const rules = { numberField: [ { required: true, message: '请输入数字', trigger: 'blur' }, { validator: isNumeric, message: '输入无效,请只输入整数', trigger: ['blur', 'change'] } ] }; export default { props: { formData: { type: Object, default: () => ({ numberField: '' }), watch: { numberField: { immediate: true, handler(newVal, oldVal) { if (newVal !== oldVal && !isNumeric(newVal)) { this.$refs.formRef.validateField('numberField'); } } } } } }, setup(props) { const formRef = ref(props.formData); return { formRef, rules }; } }; </script> ``` 在这个例子中,我们定义了一个`isNumeric`函数用于检查输入是否为数字,然后在`numberField`的验证规则中使用了这个函数。当用户输入时,如果输入的不是数字,会触发错误提示。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张_Laura

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值