Nhận giá trị đầu vào khi gửi JavaScript

Bản tóm tắt. trong hướng dẫn này, bạn sẽ tìm hiểu về JavaScript form API. truy cập biểu mẫu, nhận giá trị của các phần tử, xác thực dữ liệu biểu mẫu và gửi biểu mẫu

Khái niệm cơ bản về biểu mẫu

Để tạo biểu mẫu trong HTML, bạn sử dụng phần tử

document.formsCode language: JavaScript (javascript)

9

<form action="/signup" method="post" id="signup"> </<span>form>Code language: HTML, XML (xml)

Phần tử

document.formsCode language: JavaScript (javascript)

9 có hai thuộc tính quan trọng.

document.forms[0]Code language: CSS (css)

1 và

document.forms[0]Code language: CSS (css)

2

• Thuộc tính

  
  document.forms[0]Code language: CSS (css)

  1 chỉ định một URL sẽ xử lý việc gửi biểu mẫu. Trong ví dụ này, hành động là URL

  
  document.forms[0]Code language: CSS (css)

  4
• Thuộc tính

  
  document.forms[0]Code language: CSS (css)

  2 chỉ định phương thức HTTP để gửi biểu mẫu với. Thông thường, phương pháp này là

  
  document.forms[0]Code language: CSS (css)

  6 hoặc

  
  document.forms[0]Code language: CSS (css)

  7

Thông thường, bạn sử dụng phương pháp

document.forms[0]Code language: CSS (css)

7 khi muốn truy xuất dữ liệu từ máy chủ và phương pháp

document.forms[0]Code language: CSS (css)

6 khi bạn muốn thay đổi dữ liệu trên máy chủ

JavaScript sử dụng đối tượng

<input type="submit" value="Subscribe">Code language: HTML, XML (xml)

0 để biểu diễn một biểu mẫu.

<input type="submit" value="Subscribe">Code language: HTML, XML (xml)

0 có các thuộc tính sau tương ứng với các thuộc tính HTML

• 
  document.forms[0]Code language: CSS (css)

  1 – là URL xử lý dữ liệu biểu mẫu. Nó tương đương với thuộc tính

  
  document.forms[0]Code language: CSS (css)

  1 của phần tử

  
  document.formsCode language: JavaScript (javascript)

  9

• 
  document.forms[0]Code language: CSS (css)

  2 – là phương thức HTTP tương đương với thuộc tính

  
  document.forms[0]Code language: CSS (css)

  2 của phần tử

  
  document.formsCode language: JavaScript (javascript)

  9

Phần tử

<input type="submit" value="Subscribe">Code language: HTML, XML (xml)

0 cũng cung cấp các phương thức hữu ích sau

• 
  <input type="submit" value="Subscribe">Code language: HTML, XML (xml)

  9 – gửi biểu mẫu

• 
  <button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

  0 – đặt lại biểu mẫu

biểu mẫu tham khảo

Để tham chiếu phần tử

document.formsCode language: JavaScript (javascript)

9, bạn có thể sử dụng các phương pháp chọn DOM như

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

2

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

Một tài liệu HTML có thể có nhiều biểu mẫu. Thuộc tính

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

3 trả về một tập hợp các biểu mẫu (

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

4) trên tài liệu

document.formsCode language: JavaScript (javascript)

Để tham khảo một biểu mẫu, bạn sử dụng một chỉ mục. Ví dụ: câu lệnh sau trả về dạng đầu tiên của tài liệu HTML

document.forms[0]Code language: CSS (css)

Gửi biểu mẫu

Thông thường, một biểu mẫu có một nút gửi. Khi bạn nhấp vào nó, trình duyệt sẽ gửi dữ liệu biểu mẫu đến máy chủ. Để tạo nút gửi, bạn sử dụng phần tử

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

5 hoặc

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

6 với loại

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

7

<input type="submit" value="Subscribe">Code language: HTML, XML (xml)

Hoặc

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

Nếu nút gửi có tiêu điểm và bạn nhấn phím

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

8, thì trình duyệt cũng gửi dữ liệu biểu mẫu

Khi bạn gửi biểu mẫu, sự kiện

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

7 sẽ được kích hoạt trước khi yêu cầu được gửi đến máy chủ. Điều này cho bạn cơ hội xác thực dữ liệu biểu mẫu. Nếu dữ liệu biểu mẫu không hợp lệ, bạn có thể ngừng gửi biểu mẫu

Để đính kèm một trình lắng nghe sự kiện vào sự kiện

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

7, bạn sử dụng phương thức

const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });Code language: JavaScript (javascript)

1 của phần tử biểu mẫu như sau

const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });Code language: JavaScript (javascript)

Để dừng gửi biểu mẫu, bạn gọi phương thức

const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });Code language: JavaScript (javascript)

2 của đối tượng

const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });Code language: JavaScript (javascript)

3 bên trong trình xử lý sự kiện

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

7 như thế này

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

Thông thường, bạn gọi phương thức

const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });Code language: JavaScript (javascript)

5 nếu dữ liệu biểu mẫu không hợp lệ. Để gửi biểu mẫu trong JavaScript, bạn gọi phương thức

<input type="submit" value="Subscribe">Code language: HTML, XML (xml)

9 của đối tượng biểu mẫu

form.submit();Code language: CSS (css)

Lưu ý rằng

const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });Code language: JavaScript (javascript)

7 không kích hoạt sự kiện

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

7. Do đó, bạn phải luôn xác thực biểu mẫu trước khi gọi phương thức này

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ư

const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });Code language: JavaScript (javascript)

9,

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

2,

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

1, v.v.

Ngoài ra, bạn có thể sử dụng thuộc tính

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

2 của đối tượng

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });

Code language: PHP (php)

3. Thuộc tính

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

4 lưu trữ một tập hợp các phần tử biểu mẫu

JavaScript cho phép bạn truy cập một phần tử theo chỉ mục, id hoặc tên. Giả sử rằng bạn có biểu mẫu đăng ký sau với hai phần tử

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

5

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

Để truy cập các phần tử của biểu mẫu, trước tiên bạn lấy phần tử biểu mẫu

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

0

Và sử dụng chỉ mục, id hoặc tên để truy cập phần tử. Phần sau truy cập phần tử biểu mẫu đầu tiên

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

1

Phần sau truy cập phần tử đầu vào thứ hai

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

2

Sau khi truy cập một trường biểu mẫu, bạn có thể sử dụng thuộc tính

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

6 để truy cập giá trị của nó, chẳng hạn

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

3

Đặt nó tất cả cùng nhau. hình thức đăng ký

Sau đây minh họa tài liệu HTML có biểu mẫu đăng ký. Xem demo trực tiếp tại đây

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

4

Tài liệu HTML tham khảo các tệp

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

7 và

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

8. Nó sử dụng phần tử

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

9 để hiển thị thông báo lỗi trong trường hợp phần tử

<button type="submit">Subscribe</<span>button>Code language: HTML, XML (xml)

5 có dữ liệu không hợp lệ

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

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ị tệp

form.submit();Code language: CSS (css)

1 hoàn chỉnh

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

5

Làm thế nào nó hoạt động

Hàm showMessage()

Hàm

form.submit();Code language: CSS (css)

2 chấp nhận một phần tử đầu vào, một thông báo và một loại

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

6

Sau đây hiển thị trường nhập tên trên biểu mẫu

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

7

Nếu giá trị của tên trống, trước tiên bạn cần lấy cha của nó là

form.submit();

Code language: CSS (css)

3 với lớp “trường”

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

8

Tiếp theo, bạn cần chọn phần tử

form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });Code language: PHP (php)

9

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

9

Sau đó, cập nhật tin nhắn

document.formsCode language: JavaScript (javascript)

0

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ố loại. Nếu loại là đúng, 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 thay đổi lớp thành lỗi

document.formsCode language: JavaScript (javascript)

1

Cuối cùng, trả về giá trị của loại

document.formsCode language: JavaScript (javascript)

2

Hàm showError() và showSuccess()

Các hàm

form.submit();Code language: CSS (css)

5 và

form.submit();Code language: CSS (css)

6 gọi hàm

form.submit();Code language: CSS (css)

2. Hàm

form.submit();Code language: CSS (css)

5 luôn trả về

form.submit();Code language: CSS (css)

9 trong khi hàm

form.submit();Code language: CSS (css)

6 luôn trả về

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

1. Ngoài ra, hàm

form.submit();Code language: CSS (css)

6 đặt thông báo lỗi thành một chuỗi trống

document.formsCode language: JavaScript (javascript)

3

Hàm hasValue()

Hàm

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

3 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 hàm

form.submit();Code language: CSS (css)

5 hoặc

form.submit();Code language: CSS (css)

6 tương ứng

document.formsCode language: JavaScript (javascript)

4

Hàm xác thựcEmail()

Hàm

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

6 xác thực nếu trường email chứa địa chỉ email hợp lệ

document.formsCode language: JavaScript (javascript)

5

Hàm

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

6 gọi hàm

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

3 để kiểm tra xem giá trị trường có trống không. Nếu trường đầu vào trống, nó sẽ hiển thị

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

9

Để 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

<form action="signup.html" method="post" id="signup"> <h1>Sign Up</<span>h1>
        <div class="field">
                <label for="name">Name:</<span>label>
                <input type="text" id="name" name="name" placeholder="Enter your fullname" />
                <small></<span>small>
        </<span>div>
        <div class="field">
                <label for="email">Email:</<span>label>
                <input type="text" id="email" name="email" placeholder="Enter your email address" />
                <small></<span>small>
        </<span>div>
        <button type="submit">Subscribe</<span>button>
</<span>form>
Code language: HTML, XML (xml)

6 sẽ hiển thị

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

01