如何在不使用 JavaScript 的情况下验证 HTML 表单输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4798046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate HTML form input without using JavaScript?
提问by Hick
I have a form like the following:
我有一个如下所示的表格：
<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>
In this form I want to ensure that, in the text box, only text is accepted as input; and only numbers are accepted in the number box. How do I do it without using JavaScript ?
在这个表单中，我想确保在文本框中只接受文本作为输入；并且只接受数字框中的数字。如何在不使用 JavaScript 的情况下做到这一点？
回答by Remy Lebeau
Javascript is the only way to validate the data on the client side before it is submitted. Since Javascript can be disabled, your server-side code should always validate any submitted data before using it.
Javascript 是在提交数据之前在客户端验证数据的唯一方法。由于可以禁用 Javascript，您的服务器端代码应始终在使用之前验证所有提交的数据。
回答by Caio
As everybody said, never trust client-side verification and HTML 5 can handle your problem, here is a example:
正如大家所说，永远不要相信客户端验证和 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 = "[email protected]" required = "required" type = "email" /> *<br />
<span>* Do not use numbers</span> <br />
<input type = "submit" value = "Submit" />
</form>
Preview (Most people don't have Opera or Safari)
预览（大多数人没有 Opera 或 Safari）
回答by Michael Irigoyen
Most likely, you cannot do this with just HTML. The exception is using HTML5, which you may or may not be able to use.
很可能，您不能仅使用 HTML 来执行此操作。例外情况是使用 HTML5，您可能会也可能无法使用。
HTML5 has a patternattribute that you can supply a regular expression to constrain what can be typed in. However, not all browser support HTML5 elements and attributes and it may not be 100% for you.
More Info: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern
HTML5 有一个pattern属性，您可以提供一个正则表达式来限制可以输入的内容。但是，并非所有浏览器都支持 HTML5 元素和属性，它可能不是 100% 适合您。更多信息：http: //www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern
You could use JavaScript to prevent it from happening and it isn't foolproof either as JavaScript can be turned off in the browser.
您可以使用 JavaScript 来防止它发生，但它也不是万无一失的，因为 JavaScript 可以在浏览器中关闭。
Your best bet would be to utilize a server-side scripting language (i.e. PHP, ASP) to verify the data submitted validates to what you expect and if not, prevent it from being submitted and throw an error. This is common practice and is sometimes used in combination with JavaScript constraints.
您最好的选择是使用服务器端脚本语言（即 PHP、ASP）来验证提交的数据是否符合您的预期，如果不是，则防止它被提交并引发错误。这是常见的做法，有时与 JavaScript 约束结合使用。
回答by bula
you can try valijate jquery plugin. of course it is a jquery plugin. but, it uses 'data-XXXX' attributes to do the validations. you can do most of the validation without writing javascript codes.
您可以尝试验证 jquery 插件。当然它是一个jquery插件。但是，它使用“data-XXXX”属性来进行验证。您无需编写 javascript 代码即可完成大部分验证。
here is an examplefor achieving above requirement
这是实现上述要求的示例
<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 valijateand data-vjmustn="?l, ?c"do the magic. it will be checked at every keystroke (data-valijate="at_text_change")
class valijate和data-vjmustn="?l, ?c"发挥作用。每次击键时都会检查它（data-valijate="at_text_change"）
if the user has entered invalid data, user will not able to submit the form.
如果用户输入了无效数据，用户将无法提交表单。
回答by user5468633
See this code example:
请参阅此代码示例：
<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>`
This will validate the box when you click off of it.
当您单击它时，这将验证该框。
