我对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">