Sử dụng JavaScript phía máy khách là một cách hiệu quả để xác thực đầu vào người sử dụng nhập trong các form. Khi có nhiều trường trong form thì xác thực bằng JavaScript trở nên quá phức tạp.

Class JavaScript trình bày ở đây làm cho việc xác thực form nhiều lần trở nên dễ dàng hơn.

Bài sưu tầm từ Internet và được mình dịch qua tiếng Việt, tuy không chuẩn lắm nhưng cũng cố giữ những gì tinh túy nhất của bài hướng dẫn, mọi người thực hành và đóng góp thêm bằng cách comment lại nhé.

[toggle_box title="Làm thế nào để thêm xác thực form JavaScript nhanh chóng" width="Width of toggle box"]

Tải về kịch bản JavaScript xác thực form

Đầu tiên, tải về kịch bản JavaScript xác thực form ở đây.
File zip tải về có chứa tập tin javascript, các ví dụ.

Kịch bản có một danh mục hầu như tất cả các loại xác nhận built-in phổ biến.

Ý tưởng là để tạo ra một tập hợp các "mô tả xác nhận" liên quan với mỗi phần tử trong một biểu mẫu. "Mô tả Xác nhận" là một chuỗi xác định loại xác nhận được thực hiện.

Mỗi trường trong những biểu mẫu có thể có không, một hoặc nhiều hợp lệ. Ví dụ,bạn có thể có một trường đầu vào được để trống, nên được ít hơn 25 ký tự và chữ số.

Nói cách khác, để xác nhận một trường, bạn chỉ cần kết hợp một tập hợp các mô tả xác nhận cho từng trường đầu vào trong biểu mẫu.

Sử dụng kịch bản xác thực biểu mẫu

Đặt file gen_validatorv4.js trong tập tin html của bạn ngay trước khi đóng thẻ HEAD

<script src="gen_validatorv4.js" type="text/javascript"></script>
</head>

Ngay sau khi xác định được biểu form của bạn, tạo một đối tượng Validator() chứa tên của biểu mẫu.


<form id='myform' action="">
<!----Your input fields go here -->
</form>

<script type="text/javascript">
var frmvalidator = new Validator("myform");
//where myform is the name/id of your form

Bây giờ, thêm các xác nhận bắt buộc

frmvalidator.addValidation("FirstName","req","Please enter your First Name");

Định dạng của hàm addValidation() là:

frmvalidator.addValidation(Tên trường, Mô tả xác nhận, Chuỗi thông báo lỗi);

Xem danh sách mô tả xác nhận đầy đủ dưới đây. Tham số thứ 3 (Chuỗi thông báo lỗi) là tùy chọn.
Bạn có thể thêm bất kỳ số nào hợp lệ cho một trường.


frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=40","Max length for FirstName is 40");

Ví dụ

Dưới đây là một ví dụ hoàn chỉnh:


<form action="" id="myform" >
<p>
<label for='FirstName'>First Name:</label>
<input type="text" id="FirstName" name="FirstName" />
</p>
<p>
<label for='LastName'>Last Name:</label>
<input type="text" id="LastName" name="LastName" />
</p>
<p>
<label for='EMail'>EMail:</label>
<input type="text" id="EMail" name="EMail" />
</p>
<p>
<label for='Phone'>Phone:</label>
<input type="text" id="Phone" name="Phone" />
</p>
<p>
<label for='Address'>Address:</label>
<textarea cols="20" rows="5" id="Address" name="Address"></textarea>
</p>
<p>
<label for='Country'>Country:</label>
<select id="Country" name="Country">
<option value="000" selected="selected">[choose yours]</option>
<option value="008">Albania</option>
<option value="012">Algeria</option>
<option value="016">American Samoa</option>
<option value="020">Andorra</option>
<option value="024">Angola</option>
<option value="660">Anguilla</option>
<option value="010">Antarctica</option>
<option value="028">Antigua And Barbuda</option>
<option value="032">Argentina</option>
<option value="051">Armenia</option>
<option value="533">Aruba</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="Submit">
</p>
</form>


<script type="text/javascript">// <![CDATA[
           var frmvalidator = new Validator("myform");  frmvalidator.addValidation("FirstName","req","Please enter your First Name");  frmvalidator.addValidation("FirstName","maxlen=20", 		"Max length for FirstName is 20");  frmvalidator.addValidation("LastName","req");  frmvalidator.addValidation("LastName","maxlen=20");  frmvalidator.addValidation("Email","maxlen=50");  frmvalidator.addValidation("Email","req");  frmvalidator.addValidation("Email","email");  frmvalidator.addValidation("Phone","maxlen=50");  frmvalidator.addValidation("Phone","numeric");  frmvalidator.addValidation("Address","maxlen=50");  frmvalidator.addValidation("Country","dontselect=000");
// ]]></script>

<script type="text/javascript">// <![CDATA[
      var frmvalidator = new Validator("myform"); frmvalidator.addValidation("FirstName","req","Please enter your First Name"); frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName is 20"); frmvalidator.addValidation("LastName","req"); frmvalidator.addValidation("LastName","maxlen=20"); frmvalidator.addValidation("Email","maxlen=50"); frmvalidator.addValidation("Email","req"); frmvalidator.addValidation("Email","email"); frmvalidator.addValidation("Phone","maxlen=50"); frmvalidator.addValidation("Phone","numeric"); frmvalidator.addValidation("Address","maxlen=50"); frmvalidator.addValidation("Country","dontselect=000");
// ]]></script>


Một số ghi chú bổ sung

  • Xác nhận form nên tạo ra chỉ sau khi đã định dạng form HTML (Chỉ đặt sau thẻ </ form>.)
  • Form của bạn nên có một tên phân biệt. Nếu có nhiều hơn một biểu mẫu trong cùng một trang, bạn có thể thêm xác nhận cho từng biểu mẫu. Tên của các biểu mẫu và xác nhận không nên xung đột (clash).
  • You can’t use the javascript onsubmit event of the form if it you are using this validator script. It is because the validator script automatically overrides the onsubmit event. If you want to add a custom validation, see the section below
  • Bạn không thể sử dụng javascript sự kiện onsubmit của form nếu bạn đang sử dụngkịch bản xác nhận này. Đó là bởi vì kịch bản xác nhận sẽ tự động ghi đè các sự kiện onsubmit. Nếu bạn muốn thêm một xác nhận tùy chỉnh, xem tiếp phần dưới đây.

[/toggle_box]

[toggle_box title="Thêm một xác nhận tùy chỉnh" width="Width of toggle box"]

Nếu bạn muốn thêm một xác nhận tùy chỉnh, không được cung cấp bởi các mô tả xácnhận, bạn có thể làm như vậy. Dưới đây là các bước thực hiện:

  • Tạo một hàm javascript trả về đúng hay sai tùy thuộc vào xác nhận:

function DoCustomValidation()
{
var frm = document.forms["myform"];
if(frm.pwd1.value != frm.pwd2.value)
{
sfm_show_error_msg('The Password and verified password does not match!',frm.pwd1);
return false;
}
else
{
return true;
}
}

Hàm sfm_show_error_msg() hiển thị các thông báo lỗi trong style mà bạn đã chọn. Các tham số đầu tiên là thông báo lỗi và tham số thứ hai là đối tượng đầu vào.

  • Associate the validation function with the validator object.
frmvalidator.setAddnlValidationFunction("DoCustomValidation");

Hàm xác thực tùy chỉnh sẽ tự động được gọi sau khi xác thực khác được thực hiện.
Nếu bạn muốn thực hiện nhiều hơn một xác nhận tùy chỉnh, bạn có thể làm tất cả các kiểm chứng trong cùng một hàm. (If you want to do more than one custom validations, you can do all those validations in the same function.)


function DoCustomValidation()
{
var frm = document.forms["myform"];
if(false == DoMyValidationOne())
{
sfm_show_error_msg('Validation One Failed!');
return false;
}
else
if(false == DoMyValidationTwo())
{
sfm_show_error_msg('Validation Two Failed!');
return false;
}
else
{
return true;
}
}

DoMyValidationOne() và DoMyValidationTwo() là các hàm tùy chỉnh để xác nhận.

Xoá Tất cả xác nhận

Trong một số trang được lập trình tự động, nó có thể được yêu cầu phải thay đổi xác nhận trong hình thức lúc lúc chạy.

Đối với các trường hợp như vậy, một hàm được bao gồm trong đó xóa tất cả các xác nhận trong các đối tượng xác nhận. (In some dynamically programmed pages, it may be required to change the validations in the form at run time. For such cases, a function is included which clears all validations in the validator object.)


frmvalidator.clearAllValidations();

Hàm này xóa tất cả các xác nhận bạn thiết lập. (This function call clears all validations you set.)

Set focus on validation failure

Theo mặc định, nếu có một lỗi xác nhận, tâm điểm được thiết lập trên các yếu tố đầu vào có lỗi. Bạn có thể vô hiệu hóa hành vi này bằng cách gọi:



frmvalidator.EnableFocusOnError(false);


[/toggle_box]

[toggle_box title="Bộ mô tả xác thực" width="Width of toggle box"]

Mô tảxác thực Cách sử dụng
required hoặc
req
Trường không nên để trống (The field should not be empty).Lưu ý rằng điều này xác nhận cho các lĩnh vực như Textbox và hộp văn bản nhiều dòng. Đối với 'lựa chọn' như thả xuống và nhóm radio, sử dụng một xác nhận thích hợp như 'dontselect' hoặc 'selone_radio'.
maxlen=??? hoặc
maxlength=???
Giới hạn độ dài nhập vào.
Ví dụ, nếu kích thước tối đa cho phép là 25, nhập mô tả xác nhận là "maxlen = 25"
minlen=??? hoặc
minlength=???
Kiểm tra độ dài của chuỗi nhập vào thỏa mãn yêu cầu tối thiểu.
Ví dụ “minlen=5″
alphanumeric hoặc
alnum
Đầu vào có thể chứa các ký tự chữ hoặc số.
(Lưu ý rằng cách trống hoặc dấu chấm câu cũng không được phép vì đó không phải là ký tự số hoặc chữ)
alphanumeric_space
alnum_s
Chỉ cho phép chữ cái, ký tự số và cách trống
num
numeric
Chỉ cho phép chữ số
alpha
alphabetic
Chỉ cho phép các ký tự chữ cái.
alpha_s
alphabetic_space
Cho phép ký tự chữ cái và cách trống
email Xác nhận trường To có một địa chỉ email thích hợp.
(Lưu ý, Xác nhận đó không thể kiểm tra xem địa chỉ email tồn tại hay không)
lt=???
lessthan=???
Xác minh các dữ liệu thấp hơn giá trị thông qua. Chỉ có giá trị cho trường số.
Ví dụ: nếu giá trị phải nhỏ hơn 1000 thì nhập mô tả xác nhận là “lt=1000″
gt=???
greaterthan=???
VXác minh các dữ liệu lớn hơn giá trị thông qua. Chỉ có giá trị cho trường số.
Ví dụ: nếu giá trị phải lớn hơn 10 thì nhập mô tả xác nhận là “gt=10″
regexp=??? Phù hợp hoá các đầu vào với một biểu thức chính quy.
Ví dụ: “regexp=^[A-Za-z]{1,20}$” cho phép lên đến 20 ký tự chữ cái.
dontselect=?? Mô tả xác nhận này chỉ có giá trị cho danh sách thả xuống. Hộp lựa chọn danh sách thả xuống thường  sẽ có một giá trị ‘Select One’ (và mục đó sẽ được chọn làm mặc định). Người dùng nên chọn một lựa chọn khác với mục ‘Select One’ này.
Nếu giá trị của tùy chọn mặc định là ’000′, mô tả xác thực sẽ là “dontselect=000″Dropdown box with default selectedDrop down list source
dontselectchk=?? Mô tả xác nhận này chỉ dùng cho check boxes. Người sử dụng không nên chọn các hộp kiểm. Cung cấp các giá trị của hộp kiểm để thay thế?? (The user should not select the given check box. Provide the value of the check box instead of ??)
Ví dụ, dontselectchk=on
shouldselchk=?? Mô tả xác nhận này chỉ dùng cho check boxes. Người dùng nên chọn các hộp kiểm. Cung cấp các giá trị của hộp kiểm để thaythế?
Ví dụ, shouldselchk=on
selone_radio Một trong những nút radio nên được lựa chọn.
Ví dụ:

chktestValidator.addValidation("Options","selone");
So sánh hai yếu tố đầu vào
eqelmnt=??? So sánh hai yếu tố đầu vào. Ví dụ: password and confirm password. Thay thế ??? bằng tên của các yếu tố đầu vào khác.
Ví dụ:

frmvalidator.addValidation("confpassword","eqelmnt=password",
 "The confirmed password is not same as password");
neelmnt=??? Giá trị không được bằng với các yếu tố đầu vào khác
Ví dụ:

frmvalidator.addValidation("password","neelmnt=username",
"The password should not be same as username");
ltelmnt=??? Các giá trị đầu vào nên được ít hơn so với các đầu vào khác. Cung cấp cho các tên của các đầu vào khác để thay thế?
leelmnt=??? The input should be less than or equal to the other input. Give the name of the other input instead of ???
gtelmnt=??? The input should be greater than the other input. Give the name of the other input instead of ???
geelmnt=??? The input should be greater than or equal to the other input. Give the name of the other input instead of ???

[/toggle_box]

[toggle_box title="Hiển thị tất cả các lỗi hình thức xác nhận với nhau trong một hộp thông báo" width="Width of toggle box"]

Nếu bạn muốn hiển thị tất cả các thông báo lỗi với nhau, ngay sau nó chỉ cần gọi hàm EnableMsgsTogether() như hình dưới đây:



frmvalidator.EnableMsgsTogether();


Xem bản mẫu

Hiển thị các lỗi hình thức xác nhận trên trang riêng của mình

Bạn có thể hiển thị các lỗi xác nhận trên trang riêng của mình.

Dưới đây là các bước:

  • Tạo ra một nơi trên trang để hiển thị các lỗi
Tạo ra một nơi trên trang để hiển thị các lỗi
tạo ra một DIV trên trang web cho các lỗi DIV nên được đặt tên là

{formname}_errorloc

nơi {formname} là tên của biểu mẫu của bạn.

Example:

<div id='myform_errorloc' class='error_strings'></div>
  • Kích hoạt tính năng hiển thị lỗi trên trang

Gọi hàm EnableOnPageErrorDisplaySingleBox() để kích hoạt tính năng hiển thị lỗi trên trang.
Ví dụ:

frmvalidator.EnableOnPageErrorDisplaySingleBox();

frmvalidator.EnableMsgsTogether();

Xem Demo ở đây

Hiển thị các thông báo lỗi bên cạnh các ô input

Dưới đây là các bước:

  • Tạo ra một nơi để hiển thị các thông báo lỗi bên cạnh các ô input
Ví dụ một thẻ DIV bên cạnh các ô input có ID theo định dạng sau:
{formname}_{inputname}_errorloc
Ví dụ:
<div id='myform_Name_errorloc' ></div>
<input type="text" name="Name" /></div>
<div>
Gọi hàm EnableOnPageErrorDisplay()
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();

[/toggle_box]

[toggle_box title="Xác thực điều kiện" width="Width of toggle box"]

Đôi khi nó có thể được yêu cầu để xác nhận các trường nhất định về điều kiện nhấtđịnh. Ví dụ, một hộp văn bản 'other' cần được điền đầy đủ chỉ khi tùy chọn radio 'other' được chọn.

Đây là cách làm để thêm một điều kiện để xác nhận:

Có một tham số thứ 4 tùy chọn cho hàm addValidation(). Nếu bạn vượt qua một điều kiện, điều kiện còn lại sẽ được kiểm tra trước khi chạy xác nhận.

Ví dụ:

frmvalidator.addValidation("hearabout_other","req","Please fill-in this textbox",
"VWZ_IsChecked(document.forms['myform'].elements['hearabout'],'Other')");

VWZ_IsChecked()  là một hàm tiện dụng trong kịch bản gen_validatorv4.js có thể được sử dụng để kiểm tra trạng thái 'checked' của radio hoặc check box. Tham số đầu tiên là đối tượng đầu vào và tham số thứ hai là giá trị.

Nếu nó là một danh sách thả xuống, bạn có thể sử dụng hàm VWZ_IsListItemSelected().

frmvalidator.addValidation("city_other","req","Please fill-in the city name",
"VWZ_IsListItemSelected(document.forms['myform'].elements['city_list'],'Other')");

VWZ_IsListItemSelected(list_objectitem_value)

Tham số đầu tiên là đối tượng danh sách thả xuống và thứ hai là giá trị của mục đó.

Kích hoạt các xác nhận tùy chỉnh khi  trình biểu mẫu

Các kịch bản xác nhận sử dụng sự kiện onsubmit của biểu mẫu để kích hoạt chứng thực. Nếu bạn đang trình biểu mẫu sử dụng mã, ví dụ về cách nhấn vào một siêu liên kết, sự kiện onsubmit không được kích hoạt:

<a href='#' onClick="document.yourform.submit()">Submit Form</a>

Bạn có thể kích hoạt các xác nhận bằng cách gọi onsubmit của form rõ ràng như thế này:

<a href='#' onClick="if(document.yourform.onsubmit()){document.yourform.submit()}">Submit Form</a>

Making it a bit neater:

<a href="javascript: submitform()">Submit</a>
<script type="text/javascript">
function submitform()
{
if(document.myform.onsubmit())
{
document.myform.submit();
}
}
</script>

[/toggle_box]

VN:F [1.9.22_1171]
Rating: 8.5/10 (2 votes cast)
JavaScript kiểm tra Form: nhanh chóng và dễ dàng!, 8.5 out of 10 based on 2 ratings

Tìm với google:

  • kiem tra fome dang ky bang js
  • kiểm tra tính hợp lệ của form bằng javascript
  • kiểm tra số điện thoại trong javascript
  • javascript: Kiemtra(this form chieu_cao);Caculate();
  • kiểm tra form hợp lệ với javascript
  • submit form bằng javascript select option
  • Kiểm tra độ dài mật khẩu bằng javascript
  • kiểm tra hợp lệ dữ liệu trong from javascript
  • kiểm tra form html bằng js
  • cach xay dung form dang ky su dung java script

Là một người đam mê tìm tòi khám phá trong công nghệ và sẵn sàng chia sẻ những gì mà mình biết.

Leave a Reply


× three = 6