html5validate ajax提交,jquery插件-Validation，Ajax全接触

jquery插件-Validation

1、基本验证方法

【required必填，remote远程效验，minlength最小长度，maxlength最大长度，rangelength长度范围，min最小值，max最大值，range值范围，email Email格式，url URL格式，date 日期，dateISO ISO日期(只能是年月日)，number 数字，digits整数，equalTo与另一个元素值相等(比如确认密码)。】

2、高级API

1、valid方法，rules方法

valid()---检查表单是否填写正确，$("#chenk").click(function(){ alert($("#demoForm").valid() ? "填写正确！"："填写错误") })

rules()---获取表单元素的效验规则，rules("add",rules)向表单元素增加效验规则，rules("remove",rules)删除表单效验规则

2、validator对象

validate方法返回Validator对象，

validator.form()验证表单是否有效，validator.element(element)验证某个元素是否有效，validator.resetForm()把表单恢复到验证前原来的状态，

3、选择器扩展

【:blank 选择所有值为空的元素，:filled选择所有值不为空的元素，:unchecked选择所有没有被选中的元素】

4、自定义验证方法

如：$.validator.addMethod("postcod",function(value,element,params){

var postcode=/^[0-9]{6}/; //正则表达式0-9个6位数

return this.optional(element) || (postcode.test(value));},"请填写正确的邮编！")

然后rules:{postcode:true }

Ajax全接触

1、概念

(1)运用html+css实现页面，(2)运用XMLHttpRequest和web服务器进行数据的异步交换，(3)运用JavaScript操作Dom，实现动态局部刷新；

2、http请求

(1)浏览器建立TCP连接 (2)浏览器发送请求 (3)浏览器发送请求头信息 (4)服务器应答 (5)服务器发送应答头信息 (6)服务器发送数据 (7)服务器关闭TCP

3、get/post 方法

get： 信息获取，使用URL传递参数，

post：修改服务器资源

4、http状态码，首位数字定义了状态码的类型

1xx：信息类，

2xx：成功，200 ok

3xx：重定向，请求没成功

4xx：客户端错误，404 not

Found,文档不存在

5xx：服务器错误，500

5、XMLHttpRequest发送请求

open(method,url,true)

send(string)

6、XMLHttpRequest取得响应

7、案例

【html】

请输入员工编号：

查询

员工新建

请输入员工姓名：

请输入员工编号：

请选择员工性别：

女

男

请输入员工职位：

保存

【js--XMLHttpRequestJson】

document.getElementById("search").onclick = function() {

var request = new XMLHttpRequest();

request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);

request.send();

request.onreadystatechange = function() {

if (request.readyState===4) {

if (request.status===200) {

var data = JSON.parse(request.responseText);

if (data.success) {

document.getElementById("searchResult").innerHTML = data.msg;

} else {

document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;

}

} else {

alert("发生错误：" + request.status);

}

}

}

}

document.getElementById("save").onclick = function() {

var request = new XMLHttpRequest();

request.open("POST", "serverjson.php");

var data = "name=" + document.getElementById("staffName").value

"&number=" + document.getElementById("staffNumber").value

"&sex=" + document.getElementById("staffSex").value

"&job=" + document.getElementById("staffJob").value;

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

request.send(data);

request.onreadystatechange = function() {

if (request.readyState===4) {

if (request.status===200) {

var data = JSON.parse(request.responseText);

if (data.success) {

document.getElementById("createResult").innerHTML = data.msg;

} else {

document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;

}

} else {

alert("发生错误：" + request.status);

}

}

}

}

【js--XMLHttpRequestJequry】

$(document).ready(function(){

$("#search").click(function(){

$.ajax({

type: "GET",

url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),

dataType: "json",

success: function(data) {

if (data.success) {

$("#searchResult").html(data.msg);

} else {

$("#searchResult").html("出现错误：" + data.msg);

}

},

error: function(jqXHR){

alert("发生错误：" + jqXHR.status);

},

});

});

$("#save").click(function(){

$.ajax({

type: "POST",

url: "serverjson.php",

data: {

name: $("#staffName").val(),

number: $("#staffNumber").val(),

sex: $("#staffSex").val(),

job: $("#staffJob").val()

},

dataType: "json",

success: function(data){

if (data.success) {

$("#createResult").html(data.msg);

} else {

$("#createResult").html("出现错误：" + data.msg);

}

},

error: function(jqXHR){

alert("发生错误：" + jqXHR.status);

},

});

});

});