Ở đây Mudassar Ahmed Khan đã 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.
TAGs: ASP.Net, JavaScript, TextBox

Bạn đang xem: 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

Xem Thêm  Cách thêm phần tử vào mảng trong Python - thêm phần tử vào python mảng

= “

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

Xem Thêm  HTMLElement: sự kiện thay đổi - API Web - đầu vào html khi thay đổi

& 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

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

Khả năng tương thích của trình duyệt

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

Internet Explorer FireFox Chrome Safari Opera

* 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


Xem thêm những thông tin liên quan đến chủ đề javascript trình xác thực trường bắt buộc

js-01

alt

  • Tác giả: Triều Nguyễn Thanh
  • Ngày đăng: 2021-03-08
  • Đánh giá: 4 ⭐ ( 7621 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: javascript
Xem Thêm  Xóa gạch dưới khỏi liên kết CSS: Cách xóa gạch dưới liên kết - css xóa liên kết gạch chân

Đặt thông báo xác thực trường bắt buộc HTML5 tùy chỉnh

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7280 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đoạn mã Vì câu trả lời này thu hút rất nhiều sự chú ý, đây là…

Dom Forms trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 8959 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dom Forms trong JavaScript – Lập Trình Từ Đầu 6 Dom Trong JavaScript

Giới thiệu Xác thực ràng buộc HTML5 / Thiết kế web

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 4 ⭐ ( 2316 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các trang web và ứng dụng tương tác không thể được tưởng tượng mà không có các biểu mẫu cho phép chúng tôi kết nối với người dùng của chúng tôi và để có được dữ liệu chúng tôi cần để

Cách xác thực biểu mẫu trong Vue.js

  • Tác giả: galaxyz.net
  • Đánh giá: 5 ⭐ ( 9483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xác thực biểu mẫu , còn gọi là xác thực trường biểu mẫu, đảm bảo user điền vào tất cả các trường bắt buộc trong biểu mẫu web. Nếu một trường có giá trị không hợp lệ, nó sẽ hiển thị thông báo lỗi và ngăn việc gửi biểu mẫu cho đến khi các giá trị thỏa mãn tất cả các luật .

Hướng dẫn và ví dụ Javascript Form Validation

  • Tác giả: openplanning.net
  • Đánh giá: 5 ⭐ ( 2276 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Top 10 dự án JavaScript cho người mới bắt đầu

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 4697 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn đang trong bước tìm dự án thì bài viết này sẽ giúp ích cho bạn. Trong bài này, mình sẽ giới thiệu cho các bạn 10 dự án JavaScript cho ngư

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php