Wie kann ich die Eingabe von HTML-Formularen ohne Verwendung von JavaScript überprüfen? - HTML, Validierung

Ich habe ein Formular wie das folgende:

<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 diesem Formular möchte ich sicherstellen, dass im Textfeld nur Text als Eingabe akzeptiert wird. und nur Nummern werden im Nummernfeld akzeptiert. Wie mache ich das ohne JavaScript?

Antworten:

7 für die Antwort № 1

Javascript ist die einzige Möglichkeit, die Daten zu validierenauf der Client-Seite, bevor es eingereicht wird. Da Javascript deaktiviert werden kann, sollte Ihr serverseitiger Code vor der Verwendung immer alle übermittelten Daten überprüfen.

---

6 für die Antwort № 2

Wie alle sagten, vertrauen Sie niemals der clientseitigen Überprüfung, und HTML 5 kann Ihr Problem lösen. Hier ein Beispiel:

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

Vorschau (Die meisten Leute haben keine Oper oder Safari)

---

2 für die Antwort № 3

Höchstwahrscheinlich können Sie dies nicht nur mit HTML tun. Die Ausnahme ist die Verwendung von HTML5, das Sie möglicherweise verwenden können oder nicht.

HTML5 hat eine pattern Attribut, mit dem Sie einen regulären Ausdruck angeben können, um die Eingabe einzuschränken. Allerdings unterstützen nicht alle Browser HTML5-Elemente und -Attribute, und es ist möglicherweise nicht 100% für Sie. Mehr Info: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern

Sie können JavaScript verwenden, um dies zu verhindern, und es ist auch nicht kinderleicht, da JavaScript im Browser deaktiviert werden kann.

Am besten nutzen Sie einen ServerDie Skriptsprache (d. h. PHP, ASP) zur Überprüfung der übermittelten Daten wird auf Ihre Erwartungen überprüft. Wenn nicht, verhindern Sie die Übermittlung und geben Sie einen Fehler aus. Dies ist gängige Praxis und wird manchmal in Kombination mit JavaScript-Einschränkungen verwendet.

---

1 für die Antwort № 4

Du kannst es versuchen valijate jquery plugin. Natürlich ist es ein JQuery-Plugin. Für die Validierungen werden jedoch "data-XXXX" -Attribute verwendet. Sie können den größten Teil der Validierung durchführen, ohne Javascript-Codes zu schreiben.

hier ist ein Beispiel zur Erreichung der oben genannten Anforderung

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

Klasse valijate und data-vjmustn = "? l ,? c" mach die Magie. es wird bei jedem Tastendruck überprüft (data-valijate = "at_text_change")

Wenn der Benutzer ungültige Daten eingegeben hat, kann er das Formular nicht senden.

---

0 für die Antwort № 5

Siehe dieses Codebeispiel:

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

Dadurch wird das Feld überprüft, wenn Sie darauf klicken.

---