Biểu mẫu JavaScript – gửi một biểu mẫu javascript

Truy cập các trường biểu mẫu

Để truy cập các trường biểu mẫu, bạn có thể sử dụng các phương thức DOM như getElementsByName () , getElementById () , querySelector () , v.v.

 
  
 & lt; 
 form 
 
 action 
 = 
 "signup.html" 
 
 method 
 = 
 "post" 
 
 id 
 = 
 "đăng ký" 
 & gt; 

 & lt; 
 h1 
 & gt; 
 Đăng ký 
 & lt; / 
 h1 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" field "
 & gt; 

 & lt; 
 label 
 
 cho 
 = 
" name "
 & gt; 
 Tên: 
 & lt; / 
 label 
 & gt; 
 & lt; 
 input 
 
 type 
 = 
" text "
 
 id 
 = 
" name "
 
 name 
 = 
" name "
 
 placeholder 
 = 
" Nhập họ tên của bạn "
 / & gt; 

 & lt; 
 small 
 & gt; 
 
 & lt; / 
 nhỏ 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" field "
 & gt; 

 & lt; 
 label 
 
 cho 
 = 
" email "
 & gt; 
 Email: 
 & lt; / 
 label 
 & gt; 
 & lt; 
 input 
 
 type 
 = 
" text "
 
 id 
 = 
" email "
 
 name 
 = 
" email "
 
 placeholder 
 = 
" Nhập địa chỉ email của bạn "
 / & gt; 

 & lt; 
 small 
 & gt; 
 
 & lt; / 
 nhỏ 
 & gt; 

 & lt; / 
 div 
 & gt; 

Nút 
 & lt; 
 
 
 type 
 = 
" submit "
 & gt; 
 Nút đăng ký 
 & lt; / 
 
 & gt; 
 & lt; / 
 biểu mẫu 
 & gt; 

 
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

 
  
 const 
 form = 
 document 
 .getElementById (
 'signup' 
);   
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

 
  form.elements [
 0 
];
form.elements [
 'name' 
];
form.elements [
 'name' 
];  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

 
  form.elements [
 1 
] ;
form.elements [
 'email' 
];
form.elements [
 'email' 
];  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

 
  < p class = "hljs-keyword"> const 
 form = 
 document 
 .getElementById (
 'signup' );
 const 
 name = form.elements [
 'name' 
];
 const 
 email = form.elements [
 'email' 
];

 
 let 
 fullName = name.value;
 let 
 emailAddress = email.value;  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

 
 
 & lt; 
 html 
 
 lang 
 = 
" vi "
 & gt; 

 & lt; 
 head 
 & gt; 

 & lt; 
 title 
 & gt; 
 Bản trình diễn biểu mẫu JavaScript 
 & lt; / < p class = "hljs-name"> title 
 & gt; 

 & lt; 
 meta 
 
 name 
 = 
" viewport "
 
 content 
 = 
" width = device-width, initial-scale = 1.0 "< / p> / & gt; 
 & lt; 
 liên kết 
 
 rel 
 = 
" stylesheet "
 
 href 
 = 
" css / style.css "
 / & gt; 

 & lt; / 
 head 
 & gt; 

 & lt; 
 body 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" container "
 & gt; 
 & lt; 
 form 
 
 action 
 = 
" signup.html "
 
 method 
 = 
" post "
 
 id 
 = 
" đăng ký "
 & gt; 

 & lt; 
 h1 
 & gt; 
 Đăng ký 
 & lt; / 
 h1 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" field "
 & gt; 

 & lt; 
 label 
 
 cho 
 = 
" name "
 & gt; 
 Tên: 
 & lt; / 
 label 
 & gt; 
 & lt; 
 input 
 
 type 
 = 
" text "
 
 id 
 = 
" name "
 
 name 
 = 
" name "
 
 placeholder 
 = 
" Nhập họ tên của bạn "
 / & gt; 

 & lt; 
 small 
 & gt; 
 
 & lt; / 
 nhỏ 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" field "
 & gt; 

 & lt; 
 label 
 
 cho 
 = 
" email "
 & gt; 
 Email: 
 & lt; / 
 label 
 & gt; 
 & lt; 
 input 
 
 type 
 = 
" text "
 
 id 
 = 
" email "
 
 name 
 = 
" email "
 
 placeholder 
 = 
" Nhập địa chỉ email của bạn "
 / & gt; 

 & lt; 
 small 
 & gt; 
 
 & lt; / 
 nhỏ 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 div 
 
 class 
 = 
" field "
 & gt; 

Nút 
 & lt; 
 
 
 type 
 = 
" submit "
 
 class 
 = 
" full "
 & gt; 
 Đăng ký Nút 
 & lt; / 
 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; / 
 biểu mẫu 
 & gt; 

 & lt; / 
 div 
 & gt; 

 & lt; 
 script 
 
 src 
 = 
" js / app.js "
 & gt; 
 
 & lt; / 
 script 
 & gt; 

 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 

 
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

Tài liệu HTML tham chiếu đến < mã> style.css và app.js tệp. Nó sử dụng phần tử & lt; small & gt; để hiển thị thông báo lỗi trong trường hợp phần tử & lt; input & gt; có dữ liệu không hợp lệ.

Gửi biểu mẫu mà không có việc cung cấp bất kỳ thông tin nào sẽ dẫn đến lỗi sau:

Việc gửi biểu mẫu có tên nhưng định dạng địa chỉ email không hợp lệ sẽ dẫn đến lỗi sau:

Phần sau hiển thị đầy đủ tệp app.js :

 
 
 
 function 
 
 showMessage 
 (
 nhập, tin nhắn, nhập 
) 
 {

 const 
 msg = input.parentNode.querySelector (
 "small" 
);
msg.innerText = tin nhắn;

input.className = type? 
 "thành công" 
: 
 "lỗi" 
;
 return 
 loại;
}

 
 function 
 
 showError 
 (
 đầu vào, tin nhắn 
) 
 {
 return 
 showMessage (input, message, 
 false 
);
}

 
 function 
 
 showSuccess 
 (
 đầu vào 
) 
 {
 return 
 showMessage (input, 
 "" 
, 
 true );
}

 
 chức năng
 
 hasValue 
 (
 input, message 
) 
 {
 if 
 (input.value.trim () === 
 "" 
) {
 return 
 showError (đầu vào, thông báo);
}
 return 
 showSuccess (đầu vào);
}

 
 function 
 
 validateEmail 
 (
 input, RequiredMsg, invalidMsg 
) 
 {

 if 
 (! hasValue (input, RequiredMsg)) {
 return 
 
 false 
;
}

 const 
 emailRegex =
 / ^ (([^ & lt; & gt; () \ [\] \\.,;: \ s @ "] + (\. [^ & lt; & gt; () \ [\] \\.,;: \ s @ "] +) *) | (". + ")) @ ((\ [[0-9] {1,3} \. [0-9] {1 , 3} \. [0-9] {1,3} \. [0-9] {1,3} \]) | (([a-zA-Z \ -0-9] + \.) + [a-zA-Z] {2,})) $ / 
;

 const 
 email = input.value.trim ();
 if 
 (! emailRegex.test (email)) {
 return 
 showError (input, invalidMsg);
}
 return 
 
 true 
;
}

 const 
 form = 
 document 
 .querySelector (
 "# signup" < / p>);

 const 
 NAME_REQUIRED = 
 "Vui lòng nhập tên của bạn" 
;
 const 
 EMAIL_REQUIRED = 
 "Vui lòng nhập email của bạn" 
;
 const 
 EMAIL_INVALID = 
 "Vui lòng nhập đúng định dạng địa chỉ email" 
;

form.addEventListener (
 "submit" 
, 
 
 function 
 (
 event 
) 
 {

event.preventDefault ();


 let 
 nameValid = hasValue (form.elements [
 "name" 
], NAME_REQUIRED);
 let 
 emailValid = validateEmail (form.elements [
 "email" 
], EMAIL_REQUIRED, EMAIL_INVALID);

 nếu 
 (nameValid & amp; & amp; emailValid) {
alert (
 "Chỉ dùng thử. Không có biểu mẫu nào được đăng." 
);
}
});

 
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

Cách hoạt động.

Hàm showMessage ()

Hàm showMessage () chấp nhận một phần tử đầu vào, một thông báo và một kiểu:

 
 
 
 function 
 
 showMessage 
 (
 nhập, tin nhắn, nhập 
) 
 {

 const 
 msg = input.parentNode.querySelector (
 "small" 
);
msg.innerText = tin nhắn;

input.className = type? 
 "thành công" 
: 
 "lỗi" 
;
 return 
 loại;
}  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

Phần sau hiển thị trường nhập tên ở dạng:

 
  
 & lt; 
 div 
 
 class 
 = 
 "field" 
 & gt; 

 & lt; 
 label 
 
 cho 
 = 
" name "
 & gt; 
 Tên: 
 & lt; / 
 label 
 & gt; 
 & lt; 
 input 
 
 type 
 = 
" text "
 
 id 
 = 
" name "
 
 name 
 = 
" name "
 
 placeholder 
 = 
" Nhập họ tên của bạn "
 / & gt; 

 & lt; 
 small 
 & gt; 
 
 & lt; / 
 nhỏ 
 & gt; 

 & lt; / 
 div 
 & gt; 
  
 
 Ngôn ngữ mã: 
 
 HTML, XML 
 
 (
 
 xml 
 
) 
 

Nếu giá trị của tên trống, trước tiên bạn cần lấy giá trị gốc của nó là & lt; div & gt; với lớp “field”.

 
  
 input 
 
. parentNode 
  
 
 Mã ngôn ngữ: < / p> 
 CSS 
 
 (
 
 css 
) 
 

Tiếp theo, bạn cần chọn phần tử & lt; small & gt; :

 
  
 const 
 msg = input.parentNode.querySelector (
" small "
);  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 < / pre> 
 Sau đó, cập nhật thông báo: 
 
 
  msg.innerText = message;  < / p> 
 Sau đó, chúng tôi thay đổi lớp CSS của trường đầu vào dựa trên giá trị của tham số kiểu. Nếu kiểu là true, chúng tôi thay đổi lớp của đầu vào thành công. Nếu không, chúng tôi sẽ thay đổi lớp thành lỗi. 
 
  input.className = type? 
 "thành công" 
: 
 "error" 
;  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Cuối cùng, trả về giá trị của kiểu: 
 
  
 return 
 type;  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Hàm showError () và showSuccess () 
  showError () Hàm  và  showSuccess ()  gọi hàm  showMessage () . Hàm  showError ()  luôn trả về  false  trong khi hàm  showSuccess ()  luôn trả về  true . Ngoài ra, hàm  showSuccess ()  đặt thông báo lỗi thành một chuỗi trống. 
 
  
 
 function 
 
 showError 
 (
 đầu vào, tin nhắn 
) 
 {
 return 
 showMessage (input, message, 
 false 
);
}

 
 function 
 
 showSuccess 
 (
 đầu vào 
) 
 {
 return 
 showMessage (input, 
 "" 
, 
 true );
}  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Hàm hasValue ()  

 Hàm  hasValue ()  kiểm tra xem phần tử đầu vào có giá trị hay không và hiển thị thông báo lỗi bằng cách sử dụng  showError ()  hoặc  showSuccess ( )  chức năng tương ứng: 
 
  
 
 function 
 
 hasValue 
 (
 input, message 
)  {
 if 
 (input.value.trim () === 
 "" 
) {
 return 
 showError (đầu vào, thông báo);
}
 return 
 showSuccess (đầu vào);
}  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Hàm validateEmail ()  

 Hàm  validateEmail ()  xác thực nếu trường email chứa địa chỉ email hợp lệ: 
 
  
 
 function 
 
 validateEmail 
 
 (input, RequiredMsg, invalidMsg) 
 
 {

 if 
 (! hasValue (input, RequiredMsg)) {
 return 
 
 false 
;
}

 const 
 emailRegex =
/^(([^<>()\[\]\\.,;:\s@
 "] + (\. [^ & lt; & gt; () \ [\] \\.,;: \ s @ "
] +) *) | (
". + "
)) @ ((\ [[ 
 0 
 
 - 9 
] {
 1 
, < p class = "hljs-number"> 3 
} \. [
 0 
 
 - 9 
] {
 1 
, 
 3 
} \. [
 0  
 - 9 
] {
 1 
, 
 3 
 } \. [
 0 
 
 - 9 
] {
 1 , 
 3 
} \]) | (([a-zA-Z \ 
 - 0 
 - 9 
] + \.) + [a-zA-Z] {
 2 
,})) $ /;

 const 
 email = input.value.trim ();
 if 
 (! emailRegex.test (email)) {
 return 
 showError (input, invalidMsg);
}
 return 
 
 true 
;
}  
 
 Ngôn ngữ mã: 
 
 PHP 
 
 (
 
 php 
 
) 
 
  validateEmail () Hàm  gọi hàm  hasValue ()  để kiểm tra xem giá trị trường có trống không. Nếu trường nhập trống, nó sẽ hiển thị  requiredMsg . 
 Để xác thực email, nó sử dụng  biểu thức chính quy . Nếu email không hợp lệ, hàm  validateEmail ()  sẽ hiển thị  invalidMsg . 
 Trình xử lý sự kiện gửi 
 Đầu tiên, hãy chọn biểu mẫu đăng ký theo id của nó bằng phương thức  querySelector () : 
 
  
 const 
 form = 
 document 
 .querySelector (
 "# signup" < / p>);  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Thứ hai, xác định một số hằng để lưu thông báo lỗi: 
 
  
 const < / p> NAME_REQUIRED = 
 "Vui lòng nhập tên của bạn" 
;
 const 
 EMAIL_REQUIRED = 
 "Vui lòng nhập email của bạn" 
;
 const 
 EMAIL_INVALID = 
 "Vui lòng nhập đúng định dạng địa chỉ email" 
;  
 < p class = "shcb-language__label"> Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Thứ ba, thêm trình xử lý sự kiện  submit  của đăng ký biểu mẫu sử dụng phương thức  addEventListener () : 
 
  form.addEventListener (< p class = "hljs-string"> "submit" 
, 
 
 function 
 (
 event 
) 
 {

event.preventDefault ();


 let 
 nameValid = hasValue (form.elements [
 "name" 
], NAME_REQUIRED);
 let 
 emailValid = validateEmail (form.elements [
 "email" 
], EMAIL_REQUIRED, EMAIL_INVALID);

 nếu 
 (nameValid & amp; & amp; emailValid) {
alert (
 "Chỉ dùng thử. Không có biểu mẫu nào được đăng." 
);
}
});
 
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Trong trình xử lý sự kiện gửi:  

 Dừng gửi biểu mẫu bằng cách gọi phương thức  event.preventDefault () . 
 Xác thực các trường tên và email bằng  hasValue () Các hàm  và  validateEmail () . 
 Nếu cả tên và email đều hợp lệ, hãy hiển thị cảnh báo. Trong ứng dụng thế giới thực, bạn cần gọi phương thức  form.submit ()  để gửi biểu mẫu. 

 Tóm tắt 
 < li> Sử dụng phần tử  & lt; form & gt;  để tạo biểu mẫu HTML. 
 Sử dụng các phương thức DOM như  getElementById ()  và  querySelector ( )  để chọn phần tử  & lt; form & gt; .  document.forms [index]  cũng trả về phần tử biểu mẫu bằng một chỉ mục số. 
 Sử dụng  form.elements  để truy cập các phần tử biểu mẫu. 
 Sự kiện  submit  kích hoạt khi người dùng nhấp vào nút gửi trên biểu mẫu. 

 Hướng dẫn này có hữu ích không?