Проверка формы HTML5 не работает для pattern = "\ d {10}" - PullRequest
Новая
       1

Проверка формы HTML5 не работает для pattern = "\ d {10}"

0 голосов
/ 20 ноября 2018

У меня есть HTML: 

#container {
  width: 600px;
  max-width: 100%;
  margin: 1em auto;
}
<div id="container">
    <form>
        <input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
        <input type="number" id="number" placeholder="enter a number" required maxlength="10" pattern="\d{10}"><br />
        <input type="submit">
    </form>
</div>

Когда я введу число с более чем 10 цифрами во 2-м поле и нажму "Отправить", пока в первом поле у ​​меня 1-10 букв, форма будет отправлена.

Я думал pattern="\d{10}", что поле должно содержать не более 10 цифр?

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Вы можете использовать max="9999999999": 

#container {
  width: 600px;
  max-width: 100%;
  margin: 1em auto;
}
<div id="container">
    <form>
        <input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
        <input type="number" id="number" placeholder="enter a number" required max="9999999999"><br />
        <input type="submit">
    </form>
</div>
0 голосов
/ 20 ноября 2018

Проблема в том, что атрибут pattern работает только с следующими input типами :

  • date
  • email
  • password
  • search
  • tel
  • text
  • url

Поскольку он не работает с number, проверка не сработает.

Чтобы исправить это, я бы рекомендовал вместо этого использовать type="text" в качестве шаблона уже явно требует числовой ввод: 

<!doctype html>
<html>
    <head>
        <style>
            #container {width: 600px; max-width: 100%; margin: 1em auto;}
        </style>
    </head>
    <body>
        <div id="container">
            <form>
                <input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
                <input type="text" id="number" placeholder="enter a number" required maxlength="10" pattern="^\d{10}$"><br />
                <input type="submit">
            </form>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...