validation 插件和Ajax

validation是一个优秀的表单验证插件，validation有17个校验规则：

1             required:true             必须输入的字段
2             remote:"check.php"        使用 ajax 方法调用 check.php 验证输入值
3             email:true                必须输入正确格式的电子邮件
4             url:true                  必须输入正确格式的网址
5             date:true                 必须输入正确格式的日期，内部调用Date.parse()方法进行校验
6             dateISO:true              必须输入正确格式的日期(ISO)，如：2009-06-23，1998/01/22
7             number:true               必须输入合法的数字(负数，小数)
8             digits:true               必须输入整数
9             creditcard:               必须输入合法的信用卡号
10            equalTo:"#field"          输入值必须和 #field 相同
11            accept:                   输入拥有合法后缀名的字符串(上传文件的后缀)
12            maxlength:5               输入长度最多是 5 的字符串(汉字算一个字符)
13            minlength:10              输入长度最小是 10 的字符串(汉字算一个字符)
14            rangelength:[5,10]        输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)
15            range:[5,10]              输入值必须介于 5 和 10 之间
16            max:5                     输入值不能大于 5

17            min:10                    输入值不能小于 10    

其大概用法如下：

<form id="demoForm">
    <p>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"/>
    </p>
   <p>
        <label for="confirm-password">确认密码</label>
        <input type="password" id="confirm-password" name="confirm-password"/>
    </p>
    <p>
        <label for="email">电子邮件：</label>
        <input id="email" name="email"/>
    </p>
    <p>
        <label for="url">网址：</label>
        <input id="url" name="url"/>
    </p>
    <p>
        <label for="date">生日：</label>
        <input id="date" name="date"/>
    </p>
    <p>
        <label for="num">随机数(0-9)：</label>
        <input id="num" name="num"/>
    </p>
    <p>
        <label for="card">信用卡号：</label>
        <input id="card" name="card"/>
    </p>
    <p>
        <input type="submit" value="登录"/>
    </p>
</form> 
<script>
$('#demoForm').validate({
    rules:{
        username:{
            required: true,
            maxlength: 10
        },
        password:{
            required: true,
            range:[5,10]
        },
        'confirm-password':{
            equalTo: "#password"
        },
        email:{
            email:true
        },
        url:{
            url:true
        },
        date:{
            dateISO:true
        },
        num:{
            min:0,
            max:9
        },
        card:{
            creditcard:true
        }
    }
})

</script>

在过去，我们在网页中刷新页面内容，需要重新从服务器获取新的页面。Ajax的出现，揭开了无刷新更新页面的新时代。其中基本的方法如下：


1.url: 
要求为String类型的参数，（默认为当前页地址）发送请求的地址。


2.type: 
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。


3.data: 
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。


4.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }
5.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }


6.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。


7.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。


Ajax用法例子：


$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});