如何在不使用 JavaScript 的情况下验证 HTML 表单输入？

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 plugin。当然它是一个 jquery 插件。但是，它使用“data-XXXX”属性进行验证。您无需编写 javascript 代码即可完成大部分验证。

这里有一个example 用于实现上述要求

<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>`

当您单击它时，这将验证该框。