jquery，完成表单验证

         表单验证是经常用到的一种本地验证方式，其作用是在数据提交到服务器之前，进行一次本地验证，很大程度上，减少了服务器关于验证的压力，也起到了避免脏数据录入服务器的作用。

      其原理是，利用焦点事件，触发检查方法，且提示相对于的提示。

       下面是菜鸟利用jQuery的表单验证方法因为其样式没有特别的地方，这里讲不再写CSS样式。在文章的最后，免费的源代码资源供和我一样的菜鸟交流学习。

       免积分源代码下载地址在文章最后！

       html

<div class="index04Container">
				<div class="index04FormeContainer">
					<div class="index04FormeTitle">
						<img src="images/index04/index04_16.png">
						用户登录
					</div>

					<form  action="#" method="post">
						<div class="index04InputCont">
							<input type="text" value="用户名/邮箱/手机号码" id="index04Name" war="请输入有效的账号信息">
							<div class="Warming"></div>
						</div>
						<div class="index04InputCont">
							<input type="text" value="填写密码" id="index04Psd">
							<input type="password" value="" id="index04Password" style="display:none;">
							<div class="Warming"></div>
						</div>
						<div class="index04Checkboxes">
							<div class="left"><input type="checkbox" id="index04Yes">  记住账号</div>
							<div class="right"><a href="#">忘记密码?</a></div>
						</div>
						<div class="index04ButCont">
							<input type="submit" value="登录" id="index04Submit">
						</div>
					</form>

					<div class="index04FormeBottom">
						使用合作网站账号登录LU-PR：
						<img src="images/index04/index04_26.png"><a href="#">新浪微博</a>    
						<img src="images/index04/index04_28.png"><a href="#">QQ登陆</a>
					</div>
				</div>
		</div>

js 代码：

$(function(){
	var commonality={
		//检查输入的值是否和初始值相同,第一个参数为对象，低二个参数为默认值
		checkName:function(id){
			var obj=$(id);
			var val=obj.val();
			var warming;
			var t=/^[a-zA-Z0-9][\w_@.$%^&#]{5,15}$/;//字母和数字开头，zhong
			if(val==""){
				warming="用户名不能为空";
				commonality.Warming(obj,false,warming);
				return false;
			}else 
			if(t.test(val)==false){
				warming="用户名需要字母开头，长度不能小于6";
				commonality.Warming(obj,false,warming);
				return false;
			}
			else{
				warming="前台验证正确";
				commonality.Warming(obj,true,warming);
				return true;
			}
		},
		//检查密码
		checkPassword:function(id){
			var obj=$(id);
			var val=obj.val();
			var warming;
			if(val==""){
				warming="密码不能为空";
				commonality.Warming(obj,false,warming);
				return false;
			}else 
			if(val.length<6){
				warming="密码，长度不能小于6";
				commonality.Warming(obj,false,warming);
				return false;
			}
			else{
				warming="密码，前台验证正确";
				commonality.Warming(obj,true,warming);
				return true;
			}
		},
		checkBox:function(id){
			if ($(id).is(':checked')) {
				return true;
			}else{
				alert("请勾选已经阅读注册协议");
				return false;
			}
		},

		//报警提示方法，对象，布尔值，提示语
		Warming:function(obj,TF,content){
			var a=obj.siblings(".Warming");
			var img='<img src="images/index04/index04_';
			if(TF){
				var warYes=img+'20.png">'+content;
				a.html(warYes);
			}else{
				var warNo=img+'23.png">'+content;
				a.html(warNo);
			}
		},
		//方法适配器，获取ID
		OnFocus:function(id){
			$(id).focus(function (){
				if ($(this).val()==this.defaultValue) {
				$(this).val("");}
			});
		},
		//方法适配器，接受id，和要执行的方法名称
		OnBlur:function(id,FunName){
			$(id).blur(function(){
				commonality[FunName](id);
				if ($(this).val()=="") {
					$(this).val(this.defaultValue);
				}		
			});
		},
		

	}//公共的方法池结束

	//用户名验证
	commonality.OnFocus("#index04Name");
	commonality.OnBlur("#index04Name","checkName");//传递了ID，和方法名称

	//假的，密码框获取焦点
	$("#index04Psd").focus(function(){
		$(this).hide();
		$("#index04Password").show().focus().addClass("onInput");;
	});
	//密码框获得焦点
	$("#index04Password").focus(function(){
		$(this).addClass("onInput");
	});
	//密码框失去焦点
	$("#index04Password").blur(function(){
		var id=$(this).attr("id");
		$(this).removeClass("onInput");
		if ($(this).val()=="") {
			$(this).removeClass("onInput").hide();
			$("#index04Psd").show();
			commonality.checkPassword('#'+id);
		}else{
			commonality.checkPassword('#'+id);
		}
	});

	$("#index04Submit").click(function(){
		if(
			commonality.checkName("#index04Name") && 
			commonality.checkPassword("#index04Password") &&
			commonality.checkBox("#index04Yes")
			){
			return true;
		}else{
			return false;
		}
		
	});
/*主方法结束*/
});

免积分源代码下载： http://download.youkuaiyun.com/detail/u014703834/8180203