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

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

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

5 个答案:

预览（大多数人没有Opera或Safari）