jquery—表单验证

HTML、CSS部分

<style>        .int{ margin-bottom: 10px;}        .high{color: red;}        .msg{color: red;}</style><form style="margin: 100px">     <div class="int">         <label for="name">姓名：</label>         <input type="text" id="name" class="required" />     </div>     <div class="int">         <label for="email">邮箱：</label>         <input type="text" id="email" class="required" />     </div>     <div class="int">         <label for="address">住址：</label>         <input type="text" id="personinfo" />     </div>     <div class="int">         <input type="submit" value="提交" id="send" style="margin-left: 70px;" />         <input type="reset" value="重置" id="res" />     </div> </form>

jquery部分

<script>   $("form :input.required").each(function(){       var $required = $("<strong class='high'>*</strong>");       $(this).parent().append($required);   })   $("form :input").blur(function(){       var parent = $(this).parent();       $(this).parent().find(".msg").remove(); //删除多余的错误提示       //验证姓名：       if($(this).is("#name")){  //is() 选择的元素是否匹配选择器。          if($.trim(this.value) == "" || $.trim(this.value).length < 3){    // $.trim 删除字符串开始和末尾的空格               parent.append("<span class='msg onError'>" + "请输入至少3位的姓名" + "</span>")             }else{           parent.find(".high").remove();           parent.append("<span class='msg'>" + "输入正确" + "</span>")              }        }       //验证邮箱：       if($(this).is("#email")){           if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){               var errorMsg = "请输入正确的E-Mail住址！";               parent.append("<span class='msg onError'>" + errorMsg + "</span>");           }else{               var okMsg=" 输入正确";               parent.find(".high").remove();               parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");           }       }   })    //点击提交   $("#send").click(function(){       $("form .required:input").trigger("blur");   //trigger()触发事件的默认行为 （点击提交触发验证）       var numError = $("form .onError").length;    //获取错误信息的个数       if(numError){  //numError>0时 return false阻止表单提交           return false;       }       alert("注册成功，密码已发到你的邮箱");   });</script>

效果图