jq实战-表单验证

作为学习的记录,方便大家查看,废话不多说,直接上代码

html 结构:

<form action="a.php" method="" class="form">    <div>        <label for="username">用户名:</label>        <input id="username" class="required" type="text" />    </div>    <div>        <label for="email">邮箱:</label>        <input id="email" class="required" type="text" />    </div>    <div><input id="send" type="submit" /></div></form> 

jq代码:

$("form :input.required").each(function(){        var $required = $('<strong class="high">*</strong>');        $(this).parent().append($required);    });    $("form :input").blur(function(){        var $parent = $(this).parent();        $parent.find(".formtips").remove(); //删除多余重复        // 验证用户名        if($(this).is('#username')){             ){                var errorMsg = "请输入6位用户名" ;                $parent.append($('<span class="formtips onError">'+errorMsg+'</span>'));            }else{                var okMsg = "输入正确";                $parent.append($('<span class="formtips okMsg">'+okMsg+'</span>'));            }        }        // 验证邮箱        if($(this).is('#email')){            if(this.value == "" ){ //|| (this.value!="" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value)                var errorMsg = "请输入正确的E-mail" ;                $parent.append($('<span class="formtips onError">'+errorMsg+'</span>'));            }else{                var okMsg = "输入正确";                $parent.append($('<span class="formtips okMsg">'+okMsg+'</span>'));            }        }    }).keyup(function() {        $(this).triggerHandler('blur');    }).focus(function(){        $(this).triggerHandler('blur');    });    $("#send").click(function(){        $("form .required:input").trigger('blur');        var numError = $("form .onError").length;        var $id = $("form .onError").prevAll(".required").attr("id");        if(numError){            ){                $("#username").focus();            }else if($id == "email"){                $("#email").focus();        }            return false;        }        alert("注册成功,密码已发送到你的邮箱,请查收");    });

学习代码是需要多跑几遍的!