Trong hướng dẫn này, bạn sẽ tìm hiểu về API biểu mẫu JavaScript: 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 và gửi biểu mẫu.

Bạn đang xem : gửi biểu mẫu javascript

Tóm tắt : trong hướng dẫn này, bạn sẽ tìm hiểu về API biểu mẫu JavaScript: 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ử & lt; form & gt; :

 

& lt;

form

action

=

"/ signup"

method

=

"post"

id

=

"đăng ký"

& gt;

& lt; /

form

& gt;

Ngôn ngữ mã:

HTML, XML

(

xml

)

Phần tử & lt; form & gt; có hai thuộc tính quan trọng: action method .

  • Thuộc tính action 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 / signup .
  • Thuộc tính method chỉ định phương thức HTTP để gửi biểu mẫu. Thông thường, phương thức là post hoặc get .

Nói chung, bạn sử dụng phương thức get khi bạn muốn truy xuất dữ liệu từ máy chủ và phương thức post khi bạn muốn thay đổi dữ liệu trên máy chủ.

JavaScript sử dụng đối tượng HTMLFormElement để đại diện mẫu. HTMLFormElement có các thuộc tính sau đây tương ứng với các thuộc tính HTML:

  • action – là URL xử lý dữ liệu biểu mẫu. Nó tương đương với thuộc tính action của phần tử & lt; form & gt; .
  • method – là phương thức HTTP tương đương với thuộc tính method của phần tử & lt; form & gt; .

Phần tử HTMLFormElement cũng cung cấp các phương pháp hữu ích sau:

  • submit () – gửi biểu mẫu.
  • reset () – đặt lại biểu mẫu.

Tham chiếu biểu mẫu

Để tham chiếu phần tử & lt; form & gt; , bạn có thể sử dụng các phương pháp chọn DOM như getElementById () :

 

const

form =

document

.getElementById (

'subscribe'

); < / code>

Ngôn ngữ mã:

JavaScript

(

ja vascript

)

Một tài liệu HTML có thể có nhiều dạng. Thuộc tính document.forms trả về tập hợp các biểu mẫu ( HTMLFormControlsCollection ) trên tài liệu:

 

document

.forms

Ngôn ngữ mã: < / p>

JavaScript

(

javascript

)

Để tham chiếu 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:

 

tài liệu

. biểu mẫu

[0]

< / code>

Ngôn ngữ mã:

CSS

(

css

)

Gửi biểu mẫu

Thông thường, biểu mẫu có 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ử & lt; input & gt; hoặc & lt; button & gt; với loại submit :

 

& lt;

input

type

=

"submit"

value

=

"Đăng ký"

& gt;

Ngôn ngữ mã:

HTML, XML

(

xml

)

Hoặc

 

Nút

& lt;

type

=

" submit "

& gt;

Nút đăng ký

& lt; /

& gt;

Ngôn ngữ mã:

HTML, XML

(

xml

)

Nếu nút gửi có focus và bạn nhấn phím Enter , 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 submit đượ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 trình xử lý sự kiện vào sự kiện submit , bạn sử dụng mã addEventListener () phương thức của phần tử biểu mẫu như sau:

 

const

form =

document

.getElementById (

'signup'

); form.addEventListener (

'submit'

, (event) = & gt; { });

Ngôn ngữ mã:

JavaScript

(

javascript

)

Để ngăn biểu mẫu đang được gửi, bạn gọi phương thức PreventDefault () của đối tượng event bên trong trình xử lý sự kiện submit như sau:

 

form.addEventListener (

'submit'

, (event) = & gt ; { event.preventDefault (); });

Ngôn ngữ mã:

PHP

(

php

)

Thông thường, bạn gọi Phương thức event.preventDefault () nếu dữ liệu biểu mẫu không hợp lệ. Để gửi biểu mẫu bằng JavaScript, bạn gọi phương thức submit () của đối tượng biểu mẫu:

 

form

. submit

();

Ngôn ngữ mã:

CSS

(

< p class = "shcb-language__slug"> css

)

Lưu ý rằng form.submit () không kích hoạt sự kiện submit . 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ư getElementsByName () , getElementById () , querySelector () , v.v.

Ngoài ra, bạn có thể sử dụng thuộc tính phần tử của đối tượng form . Thuộc tính form.elements 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ử & lt; input & 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;

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

)

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

'signup'

);

Ngôn ngữ mã:

JavaScript

(

javascript

)

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

 

form.elements [

0

]; form.elements [

'name'

]; form.elements [

'name'

];

Ngôn ngữ mã:

JavaScript

(

javascript

)

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

 

form.elements [

1

] ; form.elements [

'email'

]; form.elements [

'email'

];

Ngôn ngữ mã:

JavaScript

(

javascript

)

Sau khi truy cập vào trường biểu mẫu, bạn có thể sử dụng thuộc tính value để truy cập giá trị của nó, ví dụ:

 

< 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

)

Tổng hợp tất cả lại: biểu mẫu đăng ký

Phần sau minh họa tài liệu HTML có biểu mẫu đăng ký. Xem bản trình diễn trực tiếp tại đây .

 

& 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 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 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:

  1. Dừng gửi biểu mẫu bằng cách gọi phương thức event.preventDefault () .
  2. Xác thực các trường tên và email bằng hasValue () Các hàm validateEmail () .
  3. 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 () 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?


Xem thêm những thông tin liên quan đến chủ đề gửi một biểu mẫu javascript

JavaScript Form Validation Tutorial

  • Tác giả: DevSage
  • Ngày đăng: 2022-02-18
  • Đánh giá: 4 ⭐ ( 2232 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Form validation is the process of ensuring that the data a user submits through a form is in the correct format and within the constraints set by the application. If the user enters data that is incorrect or missing, the form validation logic can prevent the form submission and prompt the user to correct the information. Form validation done via JavaScript on a web page is called 'client-side' form validation.

    📚Materials/References:

    GitHub Code: https://github.com/pkellz/js-form-validation-project

    🌎 Find Me Here:

    Twitter: https://twitter.com/realDevSage
    Discord: https://discord.gg/BP8wPv6raA
    Ebooks: https://payhip.com/devsage
    Merch: https://cottonbureau.com/people/devsage

    ⏰ Timestamps
    0:24 - Demo
    1:22 - Styling/CSS
    14:26 - Adding Validation

Nguyên mẫu JavaScript

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

Gửi biểu mẫu AJAX bằng JQuery

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 9322 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong khi JavaScript vani tiếp tục bắt kịp JQuery về khả năng và tính nhất quán trên nhiều trình duyệt, thì việc xử lý các biểu mẫu gửi trong JavaScript vẫn có thể là một bãi mìn của các lỗi và sự không nhất quán.

Làm thế nào để gửi biểu mẫu bằng JavaScript bằng cách nhấp vào liên kết?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 4636 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cách tốt nhất Cách tốt nhất là chèn một thẻ đầu vào thích hợp:

Biểu mẫu trong JavaScript

  • Tác giả: code24h.com
  • Đánh giá: 4 ⭐ ( 6441 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xác nhận biểu mẫu trong JavaScript
    Xác nhận mẫu HTML có thể được thực hiện bằng JavaScript. Nếu một trường mẫu (fname) trống rỗng, chức năng này sẽ cảnh báo một thông báo và trả về false để ngăn không cho biểu mẫu được gửi:
    Ví dụ JavaScript
    function ...

[Tự học Javascript] Forms: sự kiện và phương thức gửi trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 1214 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cafedev chia sẻ về Sự kiện submit kích hoạt khi biểu mẫu được gửi, nó thường được sử dụng để xác thực biểu mẫu trước khi gửi đến máy chủ hoặc để hủy gửi và xử lý bằng JavaScript.

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

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

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

Xem Thêm  Tạo một tệp trống bằng Python - tạo một tệp mới trong python

By ads_php