Hướng dẫn Validate form bằng Javascript cơ bản - AGOLA Hướng dẫn Validate form bằng Javascript cơ bản - AGOLA
7 / 100

Hôm nay tôi hướng dẫn bạn cách validate form bằng Javascript với những bài toán và demo thực tế cho các bạn coi nhé

1. Bài toán validate form bằng Javascript

Trước tiên bạn hãy tạo một form đăng ký thành viên gồm các thông tin: Tên đăng nhập, mật khẩu, điện thoại, email, và cuối cùng là địa chỉ.

HTMLRUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<form method="post" action="" id="loginform">
    <table border="1" cellpadding="10">
        <tr>
            <td>Tên đăng nhập: </td>
            <td>
                <input type="text" id="username" name="username" value=""/>
                <span id="username_error"></span>
            </td>
        </tr>
        <tr>
            <td>Mật khẩu: </td>
            <td>
                <input type="text" id="password" name="password" value=""/>
                <span id="password_error"></span>
            </td>
        </tr>
        <tr>
            <td>Nhập lại mật khẩu: </td>
            <td>
                <input type="text" id="repassword" name="repassword" value=""/>
                <span id="repassword_error"></span>
            </td>
        </tr>
        <tr>
            <td>Phone: </td>
            <td>
                <input type="text" id="phone" name="phone" value=""/>
                <span id="phone_error"></span>
            </td>
        </tr>
        <tr>
            <td>Email </td>
            <td>
                <input type="text" id="email" name="email" value=""/>
                <span id="email_error"></span>
            </td>
        </tr>
        <tr>
            <td>Địa chỉ </td>
            <td>
                <input type="text" id="address" name="address" value=""/>
                <span id="address_error"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" onclick="return validate();" id="btn" name="btn" value="Đăng ký"/>
            </td>
        </tr>
    </table>
</form>

Và đây là yêu cầu của bài toán:

  • Username không được trống, tối thiểu 5 ký tự, ko chứa ký tự đặc biệt
  • Mật khẩu không được trống, tối thiểu 8 ký tự
  • Mật khẩu nhập lại phải trùng
  • Phone phải là những con số và 10 ký tự
  • Email phải đúng định dạng, va không được để trống.

2. Tạo các function Javascript hỗ trợ validate form

Phần HTML đã xong rồi, bây giờ ta bắt đầu code Javascript.

Trước tiên bạn hãy tạo cho mình hai function bổ trợ như sau:

1
2
3
4
5
6
7
8
9
// Lấy giá trị của một input
function getValue(id){
    return document.getElementById(id).value.trim();
}
// Hiển thị lỗi
function showError(key, mess){
    document.getElementById(key + '_error').innerHTML = mess;
}

Trong đó function getValue dùng để lấy giá trị của một thẻ input, tham số truyền vào chính là ID của thẻ cần lấy.

Function showError dùng để hiển thị nội dung lỗi, nó sẽ gắn nội dung vào thẻ span mà ta đã khai báo ở phần HTML.

3. Các bước validate form bằng Javascript

Bây giờ ta bắt đầu xử lý từng điều kiện một nhé.

Bạn có thấy trong button Đăng Ký mình có bổ sung một function vào sự kiện click không?

1
<input type="submit" onclick="return validate();" id="btn" name="btn" value="Đăng ký"/>

Ta hãy tạo một function tên là validate nhé.

1
2
3
4
function validate()
{
    // Code validate tại đây
}

Bây giờ ta sẽ code validate cho nó vào trong function này.

DemoRUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function validate()
{
    var flag = true;
    
    // 1 username
    var username = getValue('username');
    if (username == '' || username.length < 5 || !/^[a-zA-Z0-9]+$/.test(username)){
        flag = false;
        showError('username', 'Vui lòng kiểm tra lại Username');
    }
    
    // 2. password
    var password = getValue('password');
    var repassword = getValue('repassword');
    if (password == '' || password.length < 8 || password != repassword){
        flag = false;
        showError('password', 'Vui lòng kiểm tra lại Password');
    }
    
    // 3. Phone
    var phone = getValue('phone');
    if (phone != '' &&  !/^[0-9]{10}$/.test(phone)){
        flag = false;
        showError('phone', 'Vui lòng kiểm tra lại Phone');
    }
    
    // 4. Email
    var email = getValue('email');
    var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
    if (!mailformat.test(email)){
        flag = false;
        
        showError('phone', 'Vui lòng kiểm tra lại Email');
    }
    
    return flag;
}

Các lý do cần đọc trước khi quyết định liên hệ tôi 

  1. Tham gia group Mua bán Google Ads và Google Shopping :

    https://www.facebook.com/groups/314513929300715

  2. Tham gia group mua bán cho thuê tài khoản BM Agency :

    https://www.facebook.com/groups/1204318359703229

  3. AGOLA chỉ cung cấp dịch vụ không có dịch vụ tư vấn hiểu tới đâu bán tới đó !
  4. Các dịch vụ liên quan đến hướng dẫn : diễn ra từ 5-30 phút thông qua teamview hoặc ultral thời gian càng ngắn giá tiền càng cao nên các bạn đọc kỹ trước khi sử dụng
  5. Các sản phẩm dịch vụ không có thương thảo giá và cũng không có hỏi thêm
  6. Không bán vĩnh viễn mọi dịch vụ mua nhầm đòi đổi sang gói dịch vụ khác
  7. Thông tin bảo hành gần như không có nhưng cũng có một số dịch vụ có bảo hành đề nghị đọc kỹ trước khi quyết định mua
  8. Quyết định mua hàng là đồng ý các điều khoản mua bán và điều khoản không được lấy lại tiền và không bồi hoàn
  9. Mua hàng thì xin đọc kỹ điều khoản ở từng mô tả trước khi quyết định nhấc máy liên hệ ở thông tin của từng gói dịch vụ
  10. Mọi giao dịch đều được phải bắt buộc chụp màn hình chuyển khoản gửi vào Zalo
  11. Các đối tượng cố ý chuyển tiền gói này để trục lợi sử dụng gói khác đều được coi là hình vi lừa đảo ! Cố ý ghi nội dung hiểu lầm về chuyển tiền để đôi co đòi sử dụng gói dịch vụ khác cũng vậy !
  12. Tôi là dân khối A nên việc viết sai lỗi chính tả thì kệ mẹ tôi thích thì mua không thích thì đừng soi đi ra chỗ khác do tôi không có soát lại chính tả nên các bạn đọc thay vì thắc mắc thì thông cảm giùm tôi ! miễn sao tôi truyền tải thông tin bạn đọc bạn thấy hiểu được bạn sử dụng không được bạn tìm bên khác
  13. Tôi không làm việc với bọn cử nhân viên là các công ty Agency , truyền thông gọi hỏi dò hỏi luyên thuyên ! Nếu cố tình tôi sẽ dùng CRM Agency cấm lock chạy Ads vĩnh viễn khi nhìn thấy đuôi theo rõi của doanh nghiệp đó mà tôi đã gán.
  14. Tôi không làm việc với bọn nào thì tôi chạy tiền tỷ tôi tiêu tiền tỷ nhưng chạy demo trước nếu ngon thì vít lớn nhưng sau 3 ngày thuê thấy đéo thấy như cam kết về ngân sách
  15. Tôi không hợp tác ăn chia hay kiểu Win Win đôi bên có lợi
  16. Tất cả những câu hỏi khi gọi điện khiến tôi nghĩ rằng bạn chưa đọc kỹ thông tin trên website sẽ được tôi từ chối vô điều kiện
  17. Không làm việc các công ty có các nhân vật nổi tiếng trên các đài báo truyền hình bởi vậy bớt quảng cáo
  18. Các đối tượng cố tình lên mạng tìm kiểm thông tin tôi và không có trao đổi được tôi dùng Zalo : O9O9.456.866 gửi STK thông tin thanh toán của tôi qua zalo đó mà vẫn chuyển tiền vào tài khoản của tôi được coi là hình vi lừa đảo cố tình trọc phá và lợi dụng sử dụng lừa đảo để mong muốn sử dụng dịch vụ của tôi nhưng vì cấm nên phải làm vậy
  19. Kiến thức của đại đa số dân trên mạng không sai mà chỉ đúng với bọn gà mờ mà thôi kiểu như bạn học lớp 1 cô giáo nói 1 không trừ được cho 2 lên cấp 2 cô giáo nói 1 trừ được cho 2 ! Lúc đó cô giáo cấp 1 hay thầy giáo cấp 2 không nói ai đúng ai sai được mà tại thời điểm đó bạn thấy nó đúng còn khi đi sâu vào nó đéo đúng 😀 ! Cũng như việc tôi bán dịch vụ cho dân trong nghề việc tôi có bắt mấy thằng cấp 1 nuốt kiến thức chuyên sâu của cấp 2 là không được bởi vậy dân nào hiểu sẽ liên hệ mua chứ đừng kiểu lơ mở hỏi cho vui cửa vui nhà

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Call Now Button
X