Làm form bằng HTML và chỉnh sửa lại giao diện cho đẹp với CSS không khó, bạn chỉ cần nhớ mấy cái input type là OK.
Vấn đề nằm ở Validate, tức là chuẩn hóa dữ liệu nhập vào và một số yêu cầu khác nữa. HTML5 làm form cũng rất tốt, nhưng có hạn chế là chưa được hỗ trợ rộng rãi và thống nhất giữa các trình duyệt, do vậy chúng ta vẫn phải cậy nhờ khá nhiều vào Javascript.
Về sau bạn sẽ biết ngoài việc bắt lỗi dữ liệu tại máy khách thì chúng ta còn phải kiểm tra dữ liệu một lần nữa tại Server cho chắc ăn bằng một ngôn ngữ lập trình web kiểu như PHP hoặc ASP.Net…
Nhưng đấy là về sau! Hiện tại chúng ta chỉ quan tâm tới Javascript thôi nhé.
Đang xem: Code javascript đăng ký thành viên
Có vẻ chém gió hơi nhiều, giờ sẽ vào đề ngay. Chẳng hạn tôi có Form phải bắt lỗi trong các trường hợp sau:
Người dùng không nhập dữ liệu;Người dùng không nhập đúng chuẩn email dạng aaa
bbb.ccc;Người dùng nhập chữ vào Số điện thoại hoặc nhập hơn 11 số;Người dùng nhập chữ vào Số lượng mua, hoặc con số nhỏ hơn hoặc bằng 0, hoặc lớn hơn hoặc bằng 100;Ngày nhận hàng không hợp chuẩn;Người dùng không chọn bất cứ hình thức thanh toán nào;
Thực tế là tôi đã viết code Javascript cho Form trên rồi, giờ bạn nhấn nútĐăng Ký Mualà biết liền, và thử xem nó có bắt lỗi đúng như yêu cầu không. Code mẫu:
Mục lục
Thẻ mở Form
2 cái action=”#” và method=”post” được dùng cho việc gửi dữ liệu lên máy chủ server nên hiện bạn không cần phải quan tâm, chúng ta chỉ cần để ý đến tên của Form ở thuộc tínhname=”myForm”và nơi xử lý dữ liệu quaonsubmit=”return validateForm()”validateForm() chính là tên hàm mà trong đó ta xây dựng code Javascript để bắt lỗi. Ta để onsubmit có nghĩa là, khi người dùng nhấn nút submit thì dữ liệu được chuyển đến hàm validateForm()
Thẻ input
Một thẻ input mẫu trong bài trên có dạng như này:
Tôi sử dụng type là text, 6 trường đầu tiên tôi sử dụng type này, trường Thanh toán là type radio, nút Đăng Ký Mua là type submit, nút Xóa là type reset.Điều quan trọng trongthẻ inputchính là name của nó. Chính thông qua name của Form và của Input mà Javascript lấy được dữ liệu nhập vào.
Lấy dữ liệu từ input
Đoạn code mẫu để lấy dữ liệu từ thẻ input:
var ten = document.forms<"myForm"><"ten">.value;Như đoạn code trên có nghĩa là bạn lấy giá trị của thẻ input có tên là“ten”trong Form có tên là“myForm”và gán giá trị lấy được này vào biếnvar ten
var email=document.forms<"myForm"><"email">.value;
Không được bỏ trống dữ liệu:
var ten = document.forms<"myForm"><"ten">.value;if (ten == “”) {alert(“Tên không được để trống”);return false;}Theo đó, sau khi lấy được dữ liệu từ thẻ input và gán vào biênten, chương trình dùng hàm if để kiểm tratencó rỗng hay không – if(ten==””). Nếu thỏa mãn điều kiện rỗng sẽ có hộp thông báo “Tên không được để trống” và ta dùng hàm alert để điều khiển tác vụ này, cuối cùng return false.
Kiểm tra dữ liệu nhập vào có phải là số không
var dienThoai = document.forms<"myForm"><"dienThoai">.value;var kiemTraDT = isNaN(dienThoai);if (kiemTraDT == true) {alert(“Điện thoại phải để ở định dạng số”);return false;}Hàm dùng để kiểm tra số đó là isNaN – viết tắt của is Not a Number. Nếu isNaN trả về giá trị TRUE nghĩa là đó không phải là một số.
Xem thêm: Review Công Ty Php Group International Viet Nam Group Archive
Kiểm tra Email hợp chuẩn
Có lẽ với đa số mọi người thì đây là code phức tạp nhất (với tôi cũng thế). Địa chỉ email chính xác phải thỏa mãn điều kiện sau:
Phải có ký tự
và dấu chấm;Dấu chấm không được đứng ở vị trí cuối cùng;
Code mẫu:
var email=document.forms<"myForm"><"email">.value;var aCong=email.indexOf(“
“);var dauCham = email.lastIndexOf(“.”);if (email == “”) {alert(“Email không được để trống”);return false;}else if ((aCongemail.length)) {alert(“Email bạn điền không chính xác”);return false;}Chúng ta cần chú ý đến lệnh indexOf, nó sẽ xác định số ký tự đứng trước nó tính từ trái sang. Ví dụ, email ab
, x, y;
Nếu không có ký tự cần tìm trong chuỗi, hàm indexOf sẽ trả về -1.
Đến đây bạn tự hỏi email.lastIndexOf(“.”) có ý nghĩa gì. Hết sức chú ý chữ last. Lệnh này cũng là xác định số ký tự đứng trước dấu chấm nhưng là dấu chấm cuối cùng.
Chẳng hạn email xyz.com
gmail.com, thế thì dấu chấm cuối cùng là dấu chấm sau chữ gmail chứ không phải sau chữ xyz.
Giờ chúng ta cùng tìm hiểu ý nghĩa code:
var aCong=email.indexOf(“
phải có ít nhất 1 ký tự sau đó mới đến dấu chấm do đó, email hợp chuẩn thì số ký tự đứng trước dấu chấm luôn lớn hơn số ký tự đứng trước
ít nhất 2 đơn vị – tức là dauCham >= aCong+ 2, ngược lại điều này thì email đó không hợp lệ, nói cách khác là:dauCham
Lệnh trên chúng ta đã ép phải tồn tại dấu chấm trong email, ngoài ra nó cũng buộc giữa dấu chấm cuối cùng và email phải có ít nhất 1 ký tự.
Tiếp đến ta xem xét câu lệnh ngăn không cho dấu chấm là ký tự cuối cùng trong email.
Xem thêm: Phiên Atc Là Gì ? Cách Sử Dụng Lệnh Atc Lệnh Atc Trong Chứng Khoán Là Gì
var dauCham = email.lastIndexOf(“.”);dauCham+2>email.lengthemail.length xác định số ký tự của chuỗi emailSau dấu chấm cuối cùng phải có ít nhất 1 ký tự do vậy nếu dauCham+ 2 > email.length nghĩa là email đó không hợp chuẩn.