jQUery-validation 插件、jQuery与Ajax的应用

Validation 是一个优秀的表单验证插件。

1.快速上手
首先引入Validation库。

<script src="./js/jquery.validate.js" type="text/javascript"></script>

<p>
     <label for="cusername">姓名</label>
     <em>*</em><input class="required" minlength="2" id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input class="required email" id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input class="url" id="curl" name="url" size="25"  value="" />
   </p>


   $('#commentForm').validate();

2.不同的写法
第一种写法

这种写法需要引入一个支持固定格式解析的jQuery插件，Validation将其很好的融合进验证规则编码中。

<p>
     <label for="cusername">姓名</label>
     <em>*</em><input class="{validate:{required:true,minlength:2}}" minlength="2" id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input class="{validate:{required:true,email:true}}" id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input class="{validate:{url:true}}" id="curl" name="url" size="25"  value="" />
   </p>

   $('#commentForm').validate({meta:"validate"});

第二种方法
不将验证规则写在 class 属性中，而写在javascript代码中。

$('#commentForm').validate({
        rules:{
            username:{
                required:true,
                minlength:2
            },
            email:{
                required:true,
                email:true
            },
            url:"url",
            comment:"required"
        }

     });

3.默认校验规则
验证规则 解释
required:true 必输字段
remote:”check.php” 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
number:true 必须输入合法的数字(负数，小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:”#field” 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10

Ajax简介
在过去，我们在网页中刷新页面内容，需要重新从服务器获取新的页面。

Ajax的出现，揭开了无刷新更新页面的新时代。

Ajax优势
优秀的用户体验：Ajax最大的有点是能在不刷新整个页面的前提下更新数据，这使得Web应用能迅速的回应用户的操作。
提高Web程序的性能：在传统模式中，数据提交是通过表单来实现的，而数据的获取则需要全页面刷新来获取整页内容。Ajax可以不刷新整个页面，按需提交数据给服务器，并接收服务器返回，然后通过dom操作，按需刷新页面的一部分。
减轻服务器和带宽的负担：Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。把传统方式下的一些服务器负担的工作转移到了客户端。
传统架构

jquery中的ajax
$.ajax()方法$ajax()方法是jQuery最底层的Ajax实现。

结构：$.ajax(options)

options参数是一个对象：

options参数名称 说明
url 发送请求的地址
type 请求方式
timeout 请求超时时间（毫秒）
data 发送到服务器的数据
datatype 预期服务器返回的数据类型
complete 完成后调用的回调函数
success 请求成功后调用的回调函数
跨域问题
什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
跨域问题一般可以在后台解决。
也可以使用jsonp方式解决跨域问题，但是也需要后台接口支持JSONP格式。