Xác thực biểu mẫu thường được sử dụng trên Máy chủ, sau khi Khách hàng đã nhập tất cả dữ liệu cần thiết và sau đó nhấp vào nút Gửi. Nếu dữ liệu do Khách hàng nhập vào không chính xác hoặc bị lỗi, Máy chủ sẽ phải gửi toàn bộ dữ liệu trở lại Khách hàng và yêu cầu rằng Biểu mẫu đó phải được gửi lại với thông tin chính xác. Đây thực sự là một quá trình kéo dài mà đặt nhiều gánh nặng lên trên Máy chủ
JavaScript cung cấp một cách để đánh giá dữ liệu của Biểu mẫu trên máy tính của Máy khách trước khi gửi nó tới Máy chủ Web
Form Validation nói chung thực hiện hai chức năng
- Thẩm định cơ bản [Xác thực biểu mẫu cơ bản] − Đầu tiên, Biểu mẫu phải được kiểm tra để đảm bảo rằng tất cả các trường bắt buộc phải nhập đầy đủ. Nó sẽ chỉ yêu cầu một vòng lặp qua mỗi trường trong Biểu mẫu và kiểm tra dữ liệu
- Thẩm định định dạng dữ liệu [Xác thực định dạng dữ liệu] − Thứ hai, dữ liệu đầu vào phải được kiểm tra tính chính xác của Biểu mẫu và giá trị. Mã của bạn phải có tính logic thích hợp để kiểm tra sự chính xác của dữ liệu
Ví dụ
Chúng ta sẽ quan sát ví dụ sau để hiểu tiến trình của thẩm phán. Dưới đây là một Biểu mẫu đơn giản trong định dạng HTML
Form Validation
Name
EMail
Zip Code
Country
Kết quả
Xác thực biểu mẫu cơ bản
Đầu tiên chúng ta xem cách thực hiện Xác thực cơ bản. Trong Form on, chúng ta đang gọi validate[] để thẩm định dữ liệu khi sự kiện onsubmit đang diễn ra. Code after only theexecuted of validate[] function
Xác thực định dạng dữ liệu
Bây giờ chúng ta sẽ thấy cách thẩm định dữ liệu Form đã nhập trước khi gửi nó tới Web Server
Ví dụ sau cách thẩm định một địa chỉ Email đã nhập. Một địa chỉ Email phải chứa ít nhất một ký hiệu '@' và một dấu chấm [. ]. Ngoài ra, '@' không phải là ký tự đầu tiên của địa chỉ Email, và dấu chấm cuối cùng ít nhất phải là một ký tự sau ký hiệu '@'
Ở đây tôi đang cố gắng xác thực cho biểu mẫu nhập liệu html. ở đây tôi muốn trả về false nếu đầu vào không phải là số. tôi muốn trả về false nếu bất kỳ thứ gì khác ngoài số được cung cấp làm đầu vào
Tôi có thể làm cái này như thế nào?
Product Price
Javascript
function validateForm[] {
var x = document.forms["product-form"]["product_price"].value;
if [x == null || x == ""] {
alert["price must have only numbers"];
return false;
}
}
Bài này nằm trong chuỗi bài chuẩn kiến thức để đi thi chuyên gia web di động của Google. Một số cách xác thực bằng HTML, sử dụng API kết hợp với javascript để tùy chỉnh lại theo ý muốn
Chúng ta cùng điểm qua các thuộc tính mà HTML5 cung cấp để xác thực
loại
Ngoài giá trị
Cafe hay Trà Đá? Gửi2, chúng ta sẽ có thêm
Cafe hay Trà Đá? Gửi
3. only allow enter address emailCafe hay Trà Đá? Gửi
4. only allow input numberCafe hay Trà Đá? Gửi
5. only allow input url formatCafe hay Trà Đá? Gửi
6. không nên sử dụng, vì mỗi nước của một kiểu định dạng số điện thoại riêng
Gửi
yêu cầu
Một thuộc tính đơn giản nhất, truyền vào một giá trị
Cafe hay Trà Đá? Gửi7, bắt buộc người dùng phải nhập giá trị nếu được đặt
Cafe hay Trà Đá? Gửi8
Cafe hay Trà Đá? Gửi
Sử dụng bộ chọn CSS
Cafe hay Trà Đá? Gửi9,
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}0 để định dạng cho phần tửinput:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}độ dài tối thiểu, độ dài tối đa, tối thiểu, tối đa
With
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}1 chúng ta sử dụng input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}2 và input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}3 để đặt ràng buộc khoảng giá trị, các input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}4, input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}5 còn lại sử dụng input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}6 và input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}7từ 3 đến 6 ký tựTừ 1 đến 10Gửi
Bộ chọn CSS cho giá trị của phần tử
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}8, input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}9input:out-of-range {
border: 2px solid red;
}
input:in-range {
border: 2px solid black;
}mẫu
Truyền vào một biểu thức chính quy, chỉ có trên
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}4, không sử dụng được với input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid black;
}5Bạn chỉ có thể nhập "cherry" hoặc "banana" Gửi
Ví dụ một biểu thức chính quy hay sử dụng
Số điện thoại Việt Nam
Chỉ bao gồm số và chữ
Giá trị Hex Color như
2 hoặctừ 3 đến 6 ký tựTừ 1 đến 10Gửi
3từ 3 đến 6 ký tựTừ 1 đến 10Gửi
Gợi ý
Sử dụng
4 để hiển thị chú giải công cụ cho người dùng biết rằng họ muốn người dùng nhập vào giá trị gìtừ 3 đến 6 ký tựTừ 1 đến 10Gửi
Tùy chỉnh câu hiển thị lỗi
Khi phần tử không hợp lệ, nó sẽ hiển thị một câu thông báo đính kèm theo phần tử, cái này phụ thuộc vào từng trình duyệt, không thể sửa lại bằng CSS, trình duyệt đang đặt ngôn ngữ gì thì nó hiển thị câu lỗi bằng ngôn ngữ đó,
Để thay đổi nội dung của câu thông báo, chúng ta buộc phải sử dụng javascript
Khả năng nhiều trình duyệt hiện tại cung cấp API để thực hiện công việc với xác thực, để đối phó với các trình duyệt cũ, tất nhiên chúng ta sử dụng polyfill như Hyperform