Как проверить ввод HTML-формы без использования JavaScript?

Question

У меня есть форма, подобная следующей:

<form action="/html/tags/html_form_tag_action.cfm" method="get">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name_applicant" value="" maxlength="100" />
</td>
</tr>
<tr>
<tr><td>Date Of Birth:</td></tr>
<tr>
<td>Date:</td><td>
<select>
  <option value ="1">1</option>
  <option value ="2">2</option>
  <option value ="3">3</option>
  <option value ="4">4</option>
  <option value ="5">5</option>
  <option value ="6">6</option>
  <option value ="7">7</option>
  <option value ="8">8</option>
  <option value ="9">9</option>
  <option value ="10">10</option>
  <option value ="11">11</option>
  <option value ="12">12</option>
  <option value ="13">13</option>
  <option value ="14">14</option>
  <option value ="15">15</option>
  <option value ="16">16</option>
  <option value ="17">17</option>
  <option value ="18">18</option>
  <option value ="19">19</option>
  <option value ="20">20</option>
  <option value ="21">21</option>
  <option value ="22">22</option>
  <option value ="23">23</option>
  <option value ="24">24</option>
  <option value ="25">25</option>
  <option value ="26">26</option>
  <option value ="27">27</option>
  <option value ="28">28</option>
  <option value ="29">29</option>
  <option value ="30">30</option>
  <option value ="31">31</option>
</select>
</td>
<td>Month:</td>
<td>
<select>
  <option value ="Jan">Jan</option>
  <option value ="Feb">Feb</option>
  <option value ="Mar">Mar</option>
  <option value ="Apr">Apr</option>
  <option value ="May">May</option>
  <option value ="Jun">Jun</option>
  <option value ="Jul">Jul</option>
  <option value ="Aug">Aug</option>
  <option value ="Sep">Sep</option>
  <option value ="Oct">Oct</option>
  <option value ="Nov">Nov</option>
  <option value ="Dec">Dec</option>
</select>
</td>
<td>Year:</td>
<td>
<input type="text" name="first_name" value="" maxlength="4" />
</td>
</tr>
<tr>
<td>EmailID:</td>
<td>
<input type="text" name="first_name" value="" maxlength="25" />
</td><td>@gmail.com</td>
</tr>
<tr><td> </td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>

В этой форме я хочу убедиться, что в текстовом поле только текст будет принят в качестве ввода;и только цифры принимаются в поле номера.Как мне это сделать без использования JavaScript?

Answer 1

Javascript - это единственный способ проверить данные на стороне клиента перед их отправкой.Поскольку Javascript можно отключить, ваш код на стороне сервера должен всегда проверять любые отправленные данные перед его использованием.

Answer 2

Как все говорили, никогда не доверяйте проверке на стороне клиента, и HTML 5 может решить вашу проблему, вот пример:

<style>
    body {
        font-family: arial;
        font-size: 15px;
    }

    br {
        clear: left;
    }

    label {
        float: left;
        width: 120px;
    }

    label, span {
        font-weight: bold;
        margin-bottom: 20px;
    }

    span {
        color: red;
        display: inline-block;
    }
</style>

<form action = "/html/tags/html_form_tag_action.cfm" method = "get">
    <!-- Regular expression took care of the "maxlength" attribute -->

    <label>Name: </label>
    <input autofocus = "autofocus" name = "name_applicant" pattern = "^\D{0,100}$" required = "required" type = "text" /> * <br />

    <label>Date of birth: </label>
    <input name = "name_applicant" required = "required" type = "date" /> <br />

    <label>Email Id: </label>
    <input name = "first_name" pattern = "^\D{0,15}\@gmail\.com$" placeholder = "anything@gmail.com" required = "required" type = "email" /> *<br />

    <span>* Do not use numbers</span> <br />

    <input type = "submit" value = "Submit" />
</form>

Предварительный просмотр (Большинство людей неесть Opera или Safari)

Answer 3

Скорее всего, вы не можете сделать это только с помощью HTML. Исключением является использование HTML5, которое вы можете или не можете использовать.

HTML5 имеет атрибут pattern, с помощью которого можно указать регулярное выражение, чтобы ограничить то, что можно вводить. Однако не все браузеры поддерживают элементы и атрибуты HTML5, и он может быть не на 100% для вас. Больше информации: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern

Вы можете использовать JavaScript, чтобы предотвратить его, и он не является надежным, так как JavaScript можно отключить в браузере.

Лучше всего было бы использовать язык сценариев на стороне сервера (например, PHP, ASP), чтобы убедиться, что представленные данные соответствуют вашим ожиданиям, а если нет, предотвратить их отправку и выдать ошибку. Это обычная практика и иногда используется в сочетании с ограничениями JavaScript.

Answer 4

вы можете попробовать Valijate JQuery плагин .конечно это плагин jquery.но он использует атрибуты data-XXXX для проверки.Вы можете выполнить большую часть проверки без написания кодов JavaScript.

Вот пример для достижения вышеуказанного требования

<form class="valijate">
<input type="text" data-valijate="at_text_change" data-vjerr="text must not contain any letter or character" data-vjmustn="?l, ?c">
</form>

class valijate и data-vjmustn = "? L,? C" сотвори волшебство.он будет проверяться при каждом нажатии клавиши ( data-valijate = "at_text_change" )

если пользователь ввел неверные данные, он не сможет отправить форму.

Answer 5

См. Этот пример кода:

<form>
    <input type="text"
           name="Number(s) Only"
           pattern="[;0-9]+"
           title ="Must be format: 12345;67891; etc"
           placeholder="12345; 67891; etc."
           onfocusout="this.checkValidity() ? '' : alert('Must be format: 12345;67891; etc')"
           required>
</form>`

Это подтвердит окно, когда вы щелкнете по нему.