我对UI部分非常陌生,我有一个表格,其中包含输入类型为数字,该字段应该只接受10位数字,一旦条件匹配,我想启用提交按钮,你能帮助我,我错过了什么吗?

$(document).ready(function() {
    $('#pnum').on('keypress', function(e) {
        var $this = $(this);
        var regex = new RegExp("^[0-9\b]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        // for 10 digit number only
        if ($this.val().length > 9) {
            e.preventDefault();
            return false;
        }
        if (e.charCode < 54 && e.charCode > 47) {
            if ($this.val().length == 0) {
                e.preventDefault();
                return false;
            } else {
                return true;
            }

        }
        if (regex.test(str)) {
        $('#submitButton').prop('disabled', false);
             return true;
        }
        e.preventDefault();
        return false;
    });
});
<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="exampleInputEmail3">Phone Number</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">+ 91</span>
        </div>
        <input type="number" class="form-control" id="pnum" name="phone_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="10" required>
    </div>
</div>
<input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2">

推荐答案

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
                                <label for="exampleInputEmail3">Phone Number</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">+ 91</span>
                                    </div>
                                    <input type="number" class="form-control" id="pnum" name="phone_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="10" required>
                                </div>
                            </div>
<input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2">
<script>
$(document).ready(function() {

$('#pnum').on('keypress', function(e) {
           const value = e.target.value
           var $this = $(this);
           var regex = new RegExp("[0-9]{9}");
           // for 10 digit number only
           if (value.length > 9) {
               e.preventDefault();
               return false;
           }
           if (regex.test(value)) {
            $('#submitButton').prop('disabled', false);
               return true;
           }
       });

  });
</script>

Javascript相关问答推荐

在带有背景图像和圆形的div中添加长方体阴影时的重影线

使用LocaleCompare()进行排序时,首先使用大写字母

使用Java脚本导入gltf场景并创建边界框

扩展类型的联合被解析为基类型

如何使用基于promise (非事件emits 器)的方法来传输数据?

MongoDB受困于太多的数据

是否可以将Select()和Sample()与Mongoose结合使用?

无法重定向到Next.js中的动态URL

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

JavaScript&;Reaction-如何避免在不使用字典/对象的情况下出现地狱?

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

如何设置时间选取器的起始值,仅当它获得焦点时?

Refine.dev从不同的表取多条记录

已在EventListener中更新/更改异步的React.js状态对象,但不会导致组件重新呈现

如何在点击2秒后用JavaScript动态改变按钮上的图标?

使用EXCEL.js模块+node.js分隔标题行中的列

我正在用JS编码一个链表,而我编写的一个Prepreend函数并没有按照我的预期工作

需要将源自AJAX的数据添加到表中

当你点击数组时,如何在相应的元素中输出?

使用JavaScript生成介于最小和最大(包括最小和最大)之间的随机数