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格式。