[Bài 4]: Kiểm tra định dạng số điện thoại, email, ngày tháng bằng 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 🙂

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(/bd{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.

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

• php xác định số điện thoại có bắt đầu từ số 0 hay không
• Tìm email của số điện thoại 0 1 6 3 6 7 2 4 0 1 3