Xác thực trường bắt buộc cho các hộp văn bản sử dụng JavaScript trong ASP.Net – javascript trình xác thực trường bắt buộc

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách thực hiện xác thực Trường Bắt buộc cho nhiều Hộp văn bản bằng JavaScript trong ASP.Net.

Đánh dấu HTML

Đánh dấu HTML sau đây bao gồm một Bảng HTML với một số Hộp văn bản và một Nút.

Các hộp văn bản cần được xác thực được gán CssClass bắt buộc và chúng cũng có các phần tử HTML SPAN được liên kết để hiển thị thông báo xác thực không thành công.

Nút đã được chỉ định một trình xử lý sự kiện OnClientClick để gọi một hàm JavaScript có tên là Xác thực.

& lt;

bảng

id

= “tblForm”

đường viền

= “0”

cellpadding

= “0”

cellpadding

= “0” & ​​gt;

& lt;

tr

& gt;

& lt;

th

colspan

= “3” & gt;

Biểu mẫu Chi tiết

& lt; / < / p>

th

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Tên:

& lt; /

td

& gt;

& lt;

td

& gt; & lt;

asp

:

TextBox

ID

= “txtFirstName”

runat

= “máy chủ”

CssClass

=

“bắt buộc” & gt; & lt; /

asp

:

TextBox

& gt; & lt; /

td

& gt;

& lt;

td

& gt; & lt;

span

lớp

= “error”

style

= “

display

: none” & gt;

Tên là bắt buộc.

& lt; /

span

& gt; & lt; /

td

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Họ:

& lt; /

td

& gt;

& lt;

td

& gt; & lt;

asp

:

TextBox

ID

= “txtLastName”

runat

= “máy chủ”

CssClass

=

“bắt buộc” & gt; & lt; /

asp

:

TextBox

& gt; & lt; /

td

& gt;

& lt;

td

& gt; & lt;

span

lớp

= “error”

style

= “

display

: none” & gt;

Họ là bắt buộc.

& lt; /

span

& gt; & lt; /

td

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Số điện thoại:

& lt; /

td

& gt;

& lt;

td

& gt; & lt;

asp

:

TextBox

ID

= “txtPhoneNumber”

runat

= “máy chủ” & gt; & lt; /

asp

:

TextBox

& gt; & lt; /

td

& gt;

& lt;

td

& gt; & lt; /

td

& gt;

< / p>

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Địa chỉ Email:

& lt; /

td

& gt;

& lt;

td

& gt; & lt;

asp

:

TextBox

ID

= “txtEmail”

runat

= “máy chủ”

CssClass

=

“bắt buộc” & gt; & lt; /

asp

:

TextBox

& gt; & lt; /

td

& gt;

& lt;

td

& gt; & lt;

span

lớp

= “error”

style

= “

display

: none” & gt;

Địa chỉ Email là bắt buộc.

& lt; /

span

& gt; & lt; /

td

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt; & lt; /

td

& gt;

< / p>

& lt;

td

& gt; & lt;

asp

:

Nút

ID

= “btnSubmit”

Văn bản

= “Gửi”

runat

= “server”

OnClientClick

= “return Validate ();”

/ & gt; & lt; /

td

& gt;

& lt;

td

& gt; & lt; /

td

& gt;

< / p>

& lt; /

tr

& gt;

& lt; /

bảng

& gt;

Xác thực Nhiều TextBox bằng JavaScript khi nhấp vào nút

Khi nút được nhấp, hàm JavaScript Validate sẽ được gọi. Đầu tiên, tất cả các phần tử HTML INPUT được tìm nạp từ Bảng HTML và sau đó một vòng lặp được chạy trên các phần tử được tìm nạp.

Bên trong vòng lặp, một kiểm tra được thực hiện để xác định xem phần tử HTML INPUT có phải là TextBox hay không và liệu phần tử này có yêu cầu CssClass hay không.

Khi cả hai điều kiện đều ĐÚNG, TextBox sẽ được xác thực và nếu xác thực không thành công, tức là nếu TextBox bị bỏ trống, phần tử HTML SPAN được liên kết của nó trong cùng một hàng Bảng HTML sẽ được hiển thị.

& lt;

script

loại

= “text / javascript” & gt;

hàm

Validate () {

var

isValid =

true

;

// Tham khảo Bảng.

var

tblForm = document.getElementById (

“tblForm”

);

// Tham chiếu tất cả các phần tử INPUT trong Bảng.

var

input = document.getElementsByTagName (

“input”

);

// Lặp lại tất cả các phần tử INPUT.

cho

(

var

i = 0; i & lt; input.length; i ++) {

// Kiểm tra xem phần tử INPUT có phải là TextBox hay không.

if

(input [i] .type ==

“text”

) {

// Kiểm tra xem Giá trị của nó có phải là BLANK hay không và cần phải có Xác thực.

if

(Trim (input [i] .value) ==

“”

& amp; & amp; input [i] .className.indexOf (

“bắt buộc “

)! = 1) {

// Nếu Xác thực bị THẤT BẠI, hãy hiển thị thông báo lỗi.

isValid =

false

;

ShowHideError (input [i],

“block”

);

}

khác

{

// Nếu Xác thực là THÀNH CÔNG, hãy ẩn thông báo lỗi.

ShowHideError (input [i],

“none”

);

}

}

}

trả lại

isValid;

};

hàm

ShowHideError (hộp văn bản, màn hình) {

var

row = textbox.parentNode.parentNode;

var

errorMsg = row.getElementsByTagName (

“span”

) [0];

nếu

(errorMsg! =

null

) {

errorMsg.style.display = display;

}

};

hàm

Trim (giá trị) {

return

value.replace (/ ^ \ s + | \ s + $ / g,

”

);

};

& lt; /

tập lệnh

& gt;

Lớp Css cho Thông báo Lỗi

& lt;

kiểu

kiểu

= “text / css” & gt;

.error

{

màu sắc

:

Màu đỏ

;

}

& lt; /

phong cách

& gt;

Ảnh chụp màn hình

Đoạn mã trên đã được thử nghiệm trong các trình duyệt sau.

* Tất cả các biểu trưng trình duyệt hiển thị ở trên là tài sản của chủ sở hữu tương ứng.

Bản trình diễn

Tải xuống