jquery实现注册验证

简单实现了 验证邮箱格式是否正确，两次输入密码是否一致的功能。每次当鼠标聚焦到其他地方的时候，对当前正在输入的文本框进行验证代码中已经有很多注释了，所以就直接贴代码了。</p>
jquery代码
$(document).ready(function(){

	//类是required的在末尾都加上*标示
	$("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //创建元素
            $(this).parent().append($required); //然后将它追加到文档中
        });
	
	//失去焦点的时候，进行判断输入的内容正不正确
	$(".int :input").blur(function(){
			var $parent = $(this).parent();
			//每次判断的时候 将 之前添加到末尾的提示信息删除
			$parent.find(".formtips").remove();
			//获取 输入框中的值
			var value = $(this).val();
			var errorMsg ="";
			var okMsg = "";
			//当邮箱框失去焦点的时候 判断邮箱格式是否正确
			if($(this).is("#email") ){
						if( value=="" || (value !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(value) )){
								errorMsg = '请输入正确的Email地址.';
                    }else{
                        okMsg = '输入正确.'; 
                    }
			}else if($(this).is("#password") ){
						if( value==""){
							errorMsg = '请输入密码';
						}else{
							okMsg = '输入正确';
						}
			}else if( $(this).is("#cpassword") ){
						var password = $("#password").val();
						if( password != value){
							errorMsg = "密码不一致";
						}else{
							okMsg = "输入正确";
						}
			}
			if(errorMsg != ""){
				$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
			}else {
				$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
			}
	});
	//提交验证
	var $cr = $("#cr");
	$("#send").click(function(){
		//勾选条款后，才能提交
		if( !$cr.is(":checked")){
			alert("请同意相关条款后,在提交！");
			return false;
		}
		//如果表单中有onError类，表示某些框的信息不符合要求
		var numError = $('form .onError').length;
        if(numError){
			alert("某些文本框输入内容不正确");
            return false;
        } 
	});
	
    //重置
         $('#res').click(function(){
                $(".formtips").remove(); 
         });
	
})
</script>

HTML代码

<form method="post" action="">

    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
	
	<div class="int">
        <label for="password">密码:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="password" id="password" class="required" />
    </div>
	
	<div class="int">
        <label for="cpassword">确认密码:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="password" id="cpassword" class="required" />
    </div>
	
	<div >
        <input type="checkbox" value="1" id="cr"  />
		<label for="cr">同意相关条款</label>
    </div>
	
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>