Pomoc w programowaniu, odpowiedzi na pytania / Html / Jak sprawdzić poprawność danych wejściowych formularza HTML bez użycia JavaScript? - html, walidacja

Jak sprawdzić poprawność danych wejściowych formularza HTML bez użycia JavaScript? - html, walidacja

Mam formularz podobny do następującego:

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

W tym formularzu chcę upewnić się, że w polu tekstowym jako tekst akceptowany jest tylko tekst; i tylko liczby są akceptowane w polu liczbowym. Jak to zrobić bez użycia JavaScript?

Odpowiedzi:

7 dla odpowiedzi № 1

Javascript jest jedynym sposobem sprawdzenia poprawności danychpo stronie klienta przed przesłaniem. Ponieważ Javascript może zostać wyłączony, kod po stronie serwera powinien zawsze sprawdzać przedłożone dane przed ich użyciem.

6 dla odpowiedzi nr 2

Jak wszyscy mówili, nigdy nie ufaj weryfikacji po stronie klienta, a HTML 5 może poradzić sobie z Twoim problemem. Oto przykład:

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

Podgląd (większość ludzi nie ma Opery ani Safari)

2 dla odpowiedzi nr 3

Najprawdopodobniej nie możesz tego zrobić za pomocą HTML. Wyjątkiem jest używanie HTML5, którego możesz użyć lub nie.

HTML5 ma pattern atrybut, który możesz podać wyrażenie regularne, aby ograniczyć to, co można wpisać. Jednak nie wszystkie przeglądarki obsługują elementy i atrybuty HTML5 i może nie być w 100% dla Ciebie. Więcej informacji: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern

Możesz użyć JavaScript, aby zapobiec jego wystąpieniu i nie jest on niezawodny, ponieważ JavaScript może być wyłączony w przeglądarce.

Najlepszym rozwiązaniem byłoby wykorzystanie strony serwerowejjęzyk skryptowy (tj. PHP, ASP) w celu sprawdzenia poprawności przesłanych danych zgodnie z oczekiwaniami, a jeśli nie, należy zapobiec ich przesyłaniu i zgłosić błąd. Jest to powszechna praktyka i czasami jest używana w połączeniu z ograniczeniami JavaScript.

1 dla odpowiedzi nr 4

możesz spróbować wtyczka valijate jquery. oczywiście jest to wtyczka jquery. ale wykorzystuje atrybuty „dane-XXXX” do sprawdzania poprawności. większość sprawdzania można wykonać bez pisania kodów javascript.

tutaj jest przykład za osiągnięcie powyższego wymagania

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

klasa valijate i data-vjmustn = "? l,? c" zrób magię. będzie sprawdzany przy każdym naciśnięciu klawisza (data-valijate = "at_text_change")

jeśli użytkownik wprowadził nieprawidłowe dane, użytkownik nie będzie mógł przesłać formularza.

0 dla odpowiedzi № 5

Zobacz ten przykład kodu:

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

Spowoduje to zatwierdzenie pola po jego kliknięciu.