Ví dụ kiểm tra form hợp lệ với Javascript

Posted on Updated on by adminChuyên mục:Kiến thức Internet

Ví dụ kiểm tra form hợp lệ với Javascript

Thực sự tất cả chúng ta hoàn toàn có thể ” mì ăn liền ” với công dụng kiểm tra form hợp lệ bởi cũng có nhiều source không lấy phí và không không lấy phí được viết gói gọn chỉ cần bỏ vào dùng là xong. Từ khi có Jquery số ứng dụng kiểm tra form là khá nhiều, tuy nhiên bạn trọn vẹn hoàn toàn có thể kiến thiết xây dựng cho mình một ứng dụng Javascript để kiểm tra hợp lệ cho form, điều này giúp bạn làm chủ code của mình tốt hơn và trọn vẹn hoàn toàn có thể tùy chỉnh ứng dụng theo ý của bạn đồng thời nếu bạn đang muốn tăng trưởng về Javascript thì cũng là một ví dụ hữu dụng .
Để diễn giải và miêu tả phương pháp sao cho giễ hiểu tôi thấy thực sự khó khăn vất vả sau khi đã triển khai xong, nhưng tôi cũng sẽ nói một cách ngắn gọn, xúc tích và tích hợp với chú thích trong đoạn code .

Ý tưởng

Tạo ra hàm kiểm tra hợp lệ bằng cách dùng vòng for lặp qua từng phần tử input trong form, tạo ra một phần tử để hiển thị thông tin lỗi, trong vòng for kiểm tra sự hợp lệ của từng phần tử nếu có lỗi lưu nội dung lỗi vào phần tử đã tạo ra, cuối vòng for nếu phần tử hiển thị thông tin lỗi có nội dung lỗi thì chèn vào sau phần tử vừa mới kiểm tra. Tạo xong hàm kiểm tra lỗi thì gọi nó bằng cách gán vào sự kiện submit của form hoặc sự kiện click lên nút submit, có thể kết hợp thêm sự kiện onchange để kiểm tra ngay khi vừa thay đổi nội dung phần tử input.

HTML code

Javascript code

var inputs = document.forms['register'].getElementsByTagName('input');
  var run_onchange = false;
  function valid(){
   var errors = false;
   var reg_mail = /^[A-Za-z0-9]+([_\.\-]?[A-Za-z0-9])*@[A-Za-z0-9]+([\.\-]?[A-Za-z0-9]+)*(\.[A-Za-z]+)+$/;
   for(var i=0; i gọi lại hàm valid()
   for(var i=0; i
Mô tả


Ở trên tôi có tạo ra biến run_onchange với giá trị mặc định ban đầu là false ý nói rằng chúng ta sẽ không kiểm tra với sự kiện onchange ban đầu, nhưng nếu form có lỗi thì chúng ta sẽ gọi lại hàm valid() để kiểm tra form lại với sự kiện onchange

Trong hàm valid tôi có tạo ra biến errors với giá trị mặc định bắt đầu là false ý nói rằng bắt đầu form là lý tưởng và không có lỗi, nhưng nếu form có lỗi thì nó sẽ nhận giá trị là true. Kết quả hàm valid trả về là ! errors ý nói rằng nếu form có lỗi thì biến errors sẽ nhận giá trị là true nên form sẽ trả về tác dụng phủ định của nó là false để form không được kích hoạt, trường hợp không có lỗi thì form sẽ được kích hoạt
Để kiểm tra email tôi hoàn toàn có thể sử dụng biểu thức quy tắc trong javascript và trong PHP thì nó cũng tựa như, biểu thức quy tắc dành cho email tôi lưu trong biến reg_mail ở đầu hàm valid ( ). Trong bài viết sau tôi sẽ có một bài nói rõ về biểu thức quy tắc trong Javascript vì đây là điều cũng khá quan trọng .

Kết luận

Tuy code hơi dài một tí nhưng để viết ứng dụng Javascript thì bạn phải xác địng làm code dài hàng mấy trang. Để sử dụng lại ứng dụng cho những lần sau thì tất cả chúng ta sẽ chuyển code viết theo dạng hướng đối tượng người dùng khi đó việc sử dụng lại sẽ vô cùng đơn thuần và đỡ mất thời hạn, trong bài viết sau tôi sẽ trình làng về thiết kế xây dựng ứng dụng hướng đối tượng người tiêu dùng và hoàn toàn có thể dùng lại trong Javascript. Điều sau cuối tôi muốn nói rằng ví dụ trên hoàn toàn có thể là chưa phải tối ưu nhất và bạn hoàn toàn có thể tìm ra được những cách làm khác mà bạn cho là tối ưu và hay hơn, tôi mong được trao đổi kinh nghiệm tay nghề với tổng thể những bạn

admin