[Bài 4]: Kiểm tra định dạng số điện thoại, email, ngày tháng bằng jquery

Bạn đang ở bài 4 trong 7 bài của serie Bài tập jquery.

bài trước chúng ta đã thực hành xong bài tập tạo menu trượt bằng jquery, ở bài tập hôm nay mình sẽ hướng dẫn các bạn kiểm tra định dạng số điện thoại, email, ngày tháng bằng jquery. Bởi vì chúng ta thường validate các định dạng thường gặp trong các form nên bài tập này đã được sinh ra 🙂

jQuery-Plugin-For-Email-Address-Management-Multiple-Emails

Yêu cầu:

Tạo các thẻ input nhập số điện thoại, email, ngày tháng vào rồi nhấn nút kiểm tra thì sẽ kiểm tra xem số điện thoại, email và ngày tháng nhập vào có đúng định dạng hay không.

Phân tích:

Chúng ta cần viết các biểu mẫu xác định định dạng của số điện thoại, email hay ngày tháng trước, rồi khi nhập thông tin vào thì chỉ cần so sánh với các biểu mẫu đã viết trước này thì sẽ xuất thông báo có đúng định dạng hay không.

Code:

Kiểm tra số điện thoại:

function validatePhone(txtPhone) {
    var a = document.getElementById(txtPhone).value;
    var filter = /^[0-9-+]+$/;
    if (filter.test(a)) {
        return true;
    }
    else {
        return false;
    }
}

Demo

Kiểm tra email:

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}

Demo

Kiểm tra ngày tháng:


function ValidateDate(dtValue)
{
var dtRegex = new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
return dtRegex.test(dtValue);
}

Demo

Giải thích:

Chúng ta viết 3 function để xác định biểu thức định dạng của 3 yêu cầu, sau đó chỉ cần khi nhập vào input thì so sánh với 3 function này để xác định có nhập đúng định dạng không.

Kết luận:

Như vậy qua bài tập này chúng ta đã có thể kiểm tra các định dạng thường dùng như số điện thoại, email, ngày tháng bằng jquery, các bạn có thể áp dụng để kiểm tra các định dạng khác nếu gặp phải.

[Bài 4]: Kiểm tra định dạng số điện thoại, email, ngày tháng bằng jquery
4.75 (95%) 4 votes

Từ khóa tìm kiếm:

  • code check số điện thoại#spf=1
  • javascript kiểm tra số điện thoại
  • regex số diện thoai Việt Nam

Bình luận

1 Bình luận on "[Bài 4]: Kiểm tra định dạng số điện thoại, email, ngày tháng bằng jquery"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
trackback

[…] khi hoàn thành bài tập kiểm tra định dạng bằng jquery thì chúng ta tiếp tục với bài tập tạo accordion bằng jquery. Đây là chức năng […]

wpDiscuz