Thứ Tư, 23 tháng 12, 2015

form in jQuery

12/23/2015 09:58:00 CH    No comments
Untitled Document

Bài 01: Validate form bằng jQuery
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 06-11-2015 - Chuyên mục: jQuery - View: 429
Trong bài này chúng ta sẽ học jQuery qua bài tập validate form đơn giản, bài tập này giúp bạn làm quen với phương thức $('selector).val() và biết được cách sử dụng jQuery để thay thế Javascript.
Chúng ta sẽ làm bài tập validate form đăng ký thành viên.


1. Tạo form đăng ký đơn giản

Cách đơn giản nhất để thao tác với các đối tượng HTML là bạn sử dụng ID, vì vậy mình sẽ đặt ID cho từng thẻ input và cho cả thẻ form.
Đây là form HTML của chúng ta: XEM DEMO


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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Examples</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://freetuts.net/public/javascript/jquery.min.js" ></script>
        <script language="javascript">
            $(document).ready(function(){
                $('#form_register').submit(function(){
                     
                    // Code validate form
                     
                });
            });
        </script>
    </head>
    <body>
        <form method="post" action="" id="form_register">
            <table border="1" cellspacing="0" cellpadding="5">
                <tr>
                    <td>Tên đăng nhập</td>
                    <td>
                        <input type="text" name="username" id="username" value="" />
                        <span id="username_error"></span>
                    </td>
                </tr>
                <tr>
                    <td>Mật khẩu:</td>
                    <td>
                        <input type="password" name="password" id="password" value="" />
                        <span id="password_error"></span>
                    </td>
                </tr>
                <tr>
                    <td>Nhập lại mật khẩu:</td>
                    <td>
                        <input type="password" name="re-password" id="re_password" value="" />
                        <span id="re_password_error"></span>
                    </td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td>
                        <input type="text" name="email" id="email" value="" />
                        <span id="email_error"></span>
                    </td>
                </tr>
                <tr>
                    <td>Điện thoại:</td>
                    <td>
                        <input type="text" name="phone" id="phone" value="" />
                        <span id="phone_error"></span>
                    </td>
                </tr>
                <tr>
                    <td>Địa chỉ:</td>
                    <td>
                        <input type="text" name="address" id="address" value=""  />
                        <span id="address_error"></span>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" name="register" id="register" value="Đăng ký" /></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Giao diện:
http://freetuts.net/upload/tut_post/images/2015/11/06/502/jquery-example-jquery-1.png
Mỗi thẻ input mình có kèm theo một thẻ span bên dưới để xuất hiện lỗi.


2. Validate form bằng jQuery

Mỗi sự kiện trong Javascript nói chung và jQuery nói riêng sẽ return về TRUE hoặc FALSE. Nếu TRUE thì sự kiện đó sẽ được chạy và ngược lại nếu FALSE thì sự kiện đó không được chạy. Như vậy trong sự kiện submit form ta sẽ kiểm tra điều kiện nếu mọi thứ OK thì ta sẽ return TRUE, ngược lại nếu có lỗi thì ta sẽ return FALSE.
Để lấy giá trị của input thì ta sử dụng cú pháp sau: $('#input_id').val();. Lưu ý là ta sử dụng hàm $.trim() để xóa khoảng trắng hai đầu.
Để hiển thị lỗi cho ô input nào thì ta sẽ thêm thông báo vào thẻ span tương ướng. Ví dụ để hiển thị lỗi cho ô tên đăng nhập thì ta sẽ sử dụng cú pháp sau: 


1

$('#username_error').text('Bạn chưa nhập tên đăng nhập');

Ta sử dụng biến flag làm cờ hiệu để biết được dữ liệu có bị lỗi hay không.
Để các bạn newbie dễ hiểu thì mình sẽ validate với những điều kiện đơn giản thôi nhé vì mục đích là giúp bạn hiểu cách sử dụng jQuery để validate form:

  • Tên đăng nhập phải lớn hơn 4 ký tự
  • Mật khẩu không được trống
  • Mật khẩu nhập lại phải giống mật khẩu ở trên
  • Email không được trống và phải đúng định dạng.

Trong bài có sử dụng hàm kiểm tra định dạng email trong bài các hàm javascript validate dữ liệu nên bạn hãy đến bài đó tham khảo nhé.
Hàm kiểm tra định dạng Email:


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

function isEmail(emailStr)
{
        var emailPat=/^(.+)@(.+)$/
        var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]"
        var validChars="\[^\\s" + specialChars + "\]"
        var quotedUser="(\"[^\"]*\")"
        var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/
        var atom=validChars + '+'
        var word="(" + atom + "|" + quotedUser + ")"
        var userPat=new RegExp("^" + word + "(\\." + word + ")*$")
        var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$")
        var matchArray=emailStr.match(emailPat)
        if (matchArray==null) {
                return false
        }
        var user=matchArray[1]
        var domain=matchArray[2]

        // See if "user" is valid
        if (user.match(userPat)==null) {
            return false
        }
        var IPArray=domain.match(ipDomainPat)
        if (IPArray!=null) {
            // this is an IP address
                  for (var i=1;i<=4;i++) {
                    if (IPArray[i]>255) {
                        return false
                    }
            }
            return true
        }
        var domainArray=domain.match(domainPat)
        if (domainArray==null) {
            return false
        }

        var atomPat=new RegExp(atom,"g")
        var domArr=domain.match(atomPat)
        var len=domArr.length

        if (domArr[domArr.length-1].length<2 ||
            domArr[domArr.length-1].length>3) {
           return false
        }

        if (len<2)
        {
           return false
        }

        return true;
}

Bây giờ là đoạn code validate form của chúng ta:


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

$(document).ready(function()
{
    $('#form_register').submit(function(){

        // BƯỚC 1: Lấy dữ liệu từ form
        var username    = $.trim($('#username').val());
        var password    = $.trim($('#password').val());
        var re_password = $.trim($('#re_password').val());
        var email       = $.trim($('#email').val());
        var phone       = $.trim($('#phone').val());
        var address     = $.trim($('#address').val());

        // BƯỚC 2: Validate dữ liệu
        // Biến cờ hiệu
        var flag = true;

        // Username
        if (username == '' || username.length < 4){
            $('#username_error').text('Tên đăng nhập phải lớn hơn 4 ký tự');
            flag = false;
        }
        else{
            $('#username_error').text('');
        }

        // Password
        if (password.length <= 0){
            $('#password_error').text('Bạn phải nhập mật khẩu');
            flag = false;
        }
        else{
            $('#password_error').text('');
        }

        // Re password
        if (password != re_password){
            $('#re_password_error').text('Mật khẩu nhập lại không đúng');
            flag = false;
        }
        else{
            $('#re_password_error').text('');
        }

        // Email
        if (!isEmail(email)){
            $('#email_error').text('Email không được để trống và phải đúng định dạng');
            flag = false;
        }
        else{
            $('#email_error').text('');
        }

        return flag;
    });
});

Các bạn có thểm XEM DEMO để hiểu rõ hơn.


3. Lời kết

Bài tập này rất đơn giản nên phù hợp với bạn đang học jQuery. Nếu bạn nào cảm thấy nó dễ và cách làm không hay thì mình xin giải thích rằng mỗi người có những cách code khác nhau và tùy vào từng bài toán khác nhau mà có những hướng giải khác nhau.

0 nhận xét:

Đăng nhận xét