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】
<label>请输入员工编号:</label> <input type="text" id="keyword" /> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工新建</h1> <label>请输入员工姓名:</label> <input type="text" id="staffName" /><br> <label>请输入员工编号:</label> <input type="text" id="staffNumber" /><br> <label>请选择员工性别:</label> <select id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>请输入员工职位:</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p> 【js--XMLHttpRequestJson】 <script> 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); } } } } </script> 【js--XMLHttpRequestJequry】 <script> $(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); }, }); }); }); </script>