Xác thực số đầu vào javascript
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ủ Show 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ủ WebForm Validation nói chung thực hiện hai chức năng
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
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ệuBâ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?
Javascript 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ạiNgoài giá trị 2, chúng ta sẽ có thêm
yêu cầuMột thuộc tính đơn giản nhất, truyền vào một giá trị 7, bắt buộc người dùng phải nhập giá trị nếu được đặt 8Sử dụng bộ chọn CSS 9,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 đaWith 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; }7 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; }9 input:out-of-range { border: 2px solid red; } input:in-range { border: 2px solid black; } mẫuTruyề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; }5 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ặc 3Gợ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ùy chỉnh câu hiển thị lỗiKhi 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 |