Xem phần 8J của cuốn sách. Tuy nhiên, trang này chứa thông tin tổng quan đầy đủ hơn về cách viết tập lệnh xác thực biểu mẫu cơ bản
Trên trang này, tôi cung cấp mã bạn cần để kiểm tra đầu vào của người dùng trong biểu mẫu. Sử dụng các đoạn mã này, bạn có thể viết các tập lệnh của riêng mình để xác thực các biểu mẫu
Tôi không thể cung cấp cho bạn một kịch bản hoàn chỉnh vì mỗi biểu mẫu và mỗi lần kiểm tra đều khác nhau. Bạn sẽ phải sử dụng các yếu tố tôi giải thích trên trang này để xây dựng kịch bản của riêng bạn. Tôi đã tạo một biểu mẫu và tập lệnh mẫu mà bạn có thể nghiên cứu để hiểu rõ về nó
Trên trang này, tôi thảo luận về những hạn chế của việc sử dụng JavaScript để kiểm tra một biểu mẫu, sau đó tôi sẽ giải thích trình xử lý sự kiện onsubmit, tiếp theo là một số phương thức và thuộc tính của chính biểu mẫu đó. Sau đó, đã đến lúc truy cập các phần tử biểu mẫu và cú pháp cụ thể để truy cập giá trị do người dùng xác định của các phần tử biểu mẫu
Xem thêm bài viết xuất sắc của Jeff Howden Forms & JavaScript Living Together in Harmony để biết một số lỗi phổ biến nhất về khả năng sử dụng và giải pháp khắc phục
Hạn chế
Trước hết, bạn nên có ý tưởng rõ ràng về điều gì sẽ xảy ra khi người dùng gửi biểu mẫu có tập lệnh xác thực JavaScript
- Biểu mẫu được kiểm tra bằng JavaScript giống như biểu mẫu được mô tả bên dưới. Nếu tập lệnh tìm thấy lỗi, quá trình gửi sẽ bị tạm dừng tại đây. Người dùng nhìn thấy cảnh báo và được yêu cầu nhập lại một số dữ liệu
- Nếu không có gì sai—hoặc nếu JavaScript bị tắt—biểu mẫu sẽ được gửi đến máy chủ và được xử lý bằng tập lệnh CGI
- Nếu tập lệnh CGI phát hiện lỗi, nó sẽ tạo một số HTML có thông báo lỗi và gửi lại cho người dùng. Trong trường hợp này, người dùng phải quay lại biểu mẫu, nhập lại một số giá trị và gửi lại
- Nếu không tìm thấy lỗi nào, tập lệnh CGI sẽ làm bất cứ điều gì nó phải làm với dữ liệu và hướng người dùng đến trang Cảm ơn
Như bạn thấy, biểu mẫu được kiểm tra lỗi hai lần. bằng JavaScript và bằng tập lệnh CGI. Kiểm tra CGI luôn hoạt động, vì CGI là phía máy chủ. Kiểm tra JavaScript chỉ hoạt động khi người dùng đã bật JavaScript. Theo đó, kiểm tra CGI là đáng tin cậy nhất. nó luôn hoạt động bất kể trình duyệt nào được sử dụng. Vậy thì tại sao lại sử dụng kiểm tra JavaScript?
Kiểm tra JavaScript rất hữu ích ngoài kiểm tra CGI vì nó có thể bắt lỗi trước khi biểu mẫu thực sự được gửi đến máy chủ. Do đó, người dùng không phải sử dụng nút quay lại để quay lại biểu mẫu, điều có thể gây nhầm lẫn và sau đó tìm kiếm trường biểu mẫu không chính xác, điều này có thể gây nhầm lẫn hơn nữa. Do đó, kiểm tra JavaScript thân thiện với người dùng hơn kiểm tra CGI
Ngoài ra, khi bạn sử dụng JavaScript, máy chủ không cần tốn quá nhiều thời gian để xử lý lỗi và do đó sẽ nhanh hơn một chút. Điều này chỉ quan trọng nếu bạn có rất nhiều biểu mẫu, nhưng bạn nên ghi nhớ điều này
Vì vậy, JavaScript không phải là một phương pháp an toàn để bắt lỗi, nhưng nó rất hữu ích khi bổ sung cho kiểm tra CGI vì nó giảm tải cho máy chủ và thân thiện hơn với người dùng. Do đó, tôi khuyên bạn nên sử dụng cả kiểm tra biểu mẫu JavaScript và kiểm tra biểu mẫu CGI. Bằng cách này, bạn có được cả sự thân thiện và bảo mật của người dùng
onsubmit
Khi sử dụng JavaScript để kiểm tra biểu mẫu, điều đầu tiên bạn cần là trình xử lý sự kiện
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
7. Trình xử lý sự kiện này chỉ định một tập lệnh được thực thi khi người dùng gửi biểu mẫu. Tập lệnh đó là nơi bạn kiểm tra xem một số trường nhất định có giá trị hay không, liệu người dùng đã chọn ít nhất một hộp kiểm chưa và bất kỳ kiểm tra nào khác mà bạn cho là cần thiếtCú pháp chung là
nơi
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
8 là tên của kịch bản. Tập lệnh này sẽ trả về function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
9 hoặc function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
0. Nếu trả lại function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
0, biểu mẫu sẽ không được gửi. Nếu một trong hai function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
9 hoặc function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
0 được trả lại thì tập lệnh sẽ dừngVì vậy, kịch bản chung trở thành một cái gì đó giống như
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
Tất nhiên chức năng này có thể trở nên phức tạp hơn nhiều nếu bạn phải kiểm tra một biểu mẫu phức tạp với rất nhiều nút radio và các thứ. Ý tưởng chung vẫn giữ nguyên, tuy nhiên. Bạn xem qua các yếu tố, kiểm tra bất cứ thứ gì bạn muốn kiểm tra và ngay khi bạn tìm thấy bất kỳ lỗi nào, bạn
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
3, sau đó tập lệnh dừng lại và biểu mẫu không được gửiKhi bạn đã tìm thấy lỗi, bạn nên thông báo cho người dùng về sự cố. Điều này từng được thực hiện bởi một
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
4, nhưng ngày nay bạn có thể tạo thông báo lỗi và chèn chúng bên cạnh trường biểu mẫuChỉ ở phần cuối của kịch bản, khi bạn đã kiểm tra tất cả các yếu tố và không gặp lỗi nào, bạn
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
5, sau đó biểu mẫu được gửiCác phương thức và thuộc tính của biểu mẫu
JavaScript có một số phương thức và thuộc tính tích hợp để xử lý các biểu mẫu. Ba trong số đó đặc biệt quan trọng
Bạn có thể gửi biểu mẫu bằng cách sử dụng phương pháp
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
6. Để gửi biểu mẫu đầu tiên trên trang, hãy làmdocument.forms[0].submit[]
Xin lưu ý rằng khi biểu mẫu được gửi bởi JavaScript, trình xử lý sự kiện
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
7 sẽ không bao giờ được thực thi. Để đặt lại biểu mẫu, hãy
document.forms[0].reset[]
Tôi giả sử, nhưng chưa kiểm tra, rằng trình xử lý sự kiện
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
8 cũng không được thực thi nếu bạn đặt lại biểu mẫu thông qua JavaScriptCuối cùng, bạn có thể thay đổi HÀNH ĐỘNG của một biểu mẫu nếu bạn muốn
document.forms[0].action = 'the_other_script.pl';
Điều này có thể rất hữu ích nếu một biểu mẫu phải được gửi tới một tập lệnh khác trong một số trường hợp
Truy cập các phần tử biểu mẫu
Tập lệnh xác thực biểu mẫu cần truy cập biểu mẫu trong trang HTML để xác định giá trị nào người dùng đã điền vào. Vì vậy, trước tiên chúng ta phải nhập biểu mẫu bằng DOM cấp 0. Cú pháp chung để truy cập một phần tử biểu mẫu là
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
0Khi trang được tải, JavaScript tạo một mảng
function checkscript[] {
if [some value is/is not something] {
// something is wrong
alert['alert user of problem'];
return false;
}
else if [another value is/is not something] {
// something else is wrong
alert['alert user of problem'];
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
}
9 trong đó nó đặt tất cả các biểu mẫu trên trang. Mẫu đầu tiên là document.forms[0].submit[]0, mẫu thứ hai là
document.forms[0].submit[]1, v.v.
Mỗi biểu mẫu có một mảng khác trong đó JavaScript đặt tất cả các phần tử trong biểu mẫu. Các phần tử đầu tiên là
document.forms[0].submit[]2, thứ hai là
document.forms[0].submit[]3, v.v. Mỗi
document.forms[0].submit[]4