Question

我有一个联系电话的输入类型：

<input type="number" name="usercontact" placeholder="Contact Number" pattern="[0-9]{8,20}" />

我已经放置了[0-9]{8,20}模式，我认为它不允许其他字符

但不知何故e，和。（点）能够通过，为什么会这样？我应该怎么只允许数字？

Answer 1

输入类型编号可以接受e或E和浮点数，负符号。

模式可用于验证。您可以检查输入的值是否有效。

根据This，当type属性的值为text，search，tel，url，email或password时，pattern属性适用，否则会被忽略。但这可以在某些浏览器中使用。

$('#numericInput').on('change keyup', function(event) {
    if ( event.target.validity.valid ) {
        $('#errorMsg').text($(this).val());
    } else {
        $('#errorMsg').text('invalid');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">

<input type="number" name="usercontact" placeholder="Contact Number" pattern="[0-9]{8,20}" id="numericInput" />
<p id="errorMsg"></p>
<button type="submit">submit</button>
</form>

Answer 2

试试这个

 <input
        type="number"
        name="username"
        placeholder="Username"
        pattern="[0-9]{1,15}"
        id="username">

Html模式正则表达式仅允许数字

2 个答案: