1.使用JQ完成省市二级联动

第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步：创建二维数组来存储省份和城市

第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步：接着遍历数组中的城市

第五步：创建一个城市文本节点

第六步：创建option元素节点

第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步：获取第二个下拉列表并将option元素节点添加进去

第九步：清除第二个下拉列表的option内容

代码：

 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
//创建二维数组存储 城市
var cities = new Array(3);
cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");
$(function() {
$("#province").change(function() {
$("#city").empty(); //清空 城市下拉框
var value = this.value; //获取当前对象的value值
//
$.each(cities, function(i, n) { //遍历 数组
if (i == value) {      //找到选择的省份
$.each(cities[i], function(j, m) { //j是数组下标   m 是 数组里面的值
//创建文本节点
var textNode = document.createTextNode(m);
//创建元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});

</script>

效果图:

表单校验

一款优秀的表单验证插件——validation插件
特点：
 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
 自定义验证规则：可以很方便的自定义验证规则
 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
 实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。


下载：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/


快速入门：
第一步：引入jquery库和validation插件




案例：
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<!--引入validate插件js文件-->

                <!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->

<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
},
repassword:{
required:"确认密码不能为空!",
equalTo:"两次输入密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>

效果图：

校验的写法:

首先找到那个对象  ：正如  $("#registForm").validate({});  找到了 注册表单

然后写注册的规则:    rules:{} 

messages 是对应 rules 的 ,只是将默认的信息更改成你需要的提示信息

注意都是复数！！！！

然后在rules里面写具体的规则，要对应表单的 每个表单项的id 来

rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},

  }

html 内容代码

<td>
<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user"/>
</td>