网上商城案例--表单校验

需求说明:在用户注册的过程中，要实现表单的校验，例如用户名在数据库是否存在，邮箱格式是否正确，密码的两次输入是否正确。

技术要点:jquery,validate,ajax,validate的自定义校验规则

代码如下

<script type="text/javascript">
	
	$.validator.addMethod(
		"isExist",
		function(value,element,params){
			var flag = false;
			//value输入的内容
			//element被校验的元素对象
			//params规则对应的参数值
			//用ajax校验
			$.ajax({
				"async":false,
				"url":"${pageContext.request.contextPath}/CheckUsername",
				"data":{"username":value},
				"type":"POST",
				"dataType":"json",
				"success":function(data){
					flag = data.isExist;	
				}
			}); 
			return flag;
		}
			
	
	);
	
	

	$(function(){
		$("#myform").validate({
			rules:{
				"username":{
					"required":true,
					"isExist":true
				},
				"password":{
					"required": true,
					"rangelength":[5,10]
				},
				"repassword":{
					"required": true,
					"rangelength":[5,10],
					"equalTo":"#password"
				},
				"email":{
					"required":true,
					"email":true
				},
				"sex":{
					"required":true
				}
			},
			messages:{
				"username":{
					"required":"用户名不能为空",
					"isExist":"用户名已经存在"
				},
				"password":{
					"required": "密码不能为空",
					"rangelength":"密码为5到10位"
				},
				"repassword":{
					"required": "确认密码不能为空",
					"rangelength":"密码为5到10位",
					"equalTo":"两次密码不一致"
				},
				"email":{
					"required":"邮箱不能为空",
					"email":"邮箱格式不正确"
				}
			}
		});
	});

</script>

难点分析:

        jquery的validate来校验密码、邮箱、性别是比较容易的，自定义规则是新接触，要熟练，因为自定义规则在很多地方需要，有些校验是本身没的例如身份证与姓名等，具体的规则如下。

$.validator.addMethod("校验规则名称",function(value,element,params){
//value输入的内容
			//element被校验的元素对象
			//params规则对应的参数值
			//用ajax校验

return true；//如果返回true那么validate就生效
})