jQuery学习记录4（待完善）
一个段简单的输入验证的代码，主要是当焦点离开输入框时即对内容进行检查，另外当点击提交时再对所有需要检查的文本框检查一遍，有错误就return false以免提交表单
待完善内容：css的设置，空格在ie和chrome下的识别问题，在chrome下显示正常，ie下有错位
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jQuery.js"> </script> <script> $(document).ready(function(){ $("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(".tip").remove(); if($(this).is("#username")) { if($(this).val()=="" || $(this).val().length<6){ var erromsg="至少为6位"; $parent.append("<span class='tip error'>"+erromsg+"</span>"); } else{ var msg="输入正确"; $parent.append("<span class='tip'>"+msg+"</span>"); } } }) $("form :input#send").click(function(){ $("form :input.required").trigger("blur"); var erronum=$("form .error").length; if(erronum){ alert("有错误的项"); return false; } }) }) </script> <style type="text/css"> .int{ } .int label{ position:relative; left:50px; } .int input{ position:relative; left:150px; } .int span{ position:relative; left:350px; } .int strong{ position:relative; left:340; } </style> </head> <body> <form name="form1" method="post" action=""> <div class="int"> <label for="username"> 用户名：</label> <input id="username" type="text" class="required"> </div> <div class="int"> <label for="email"> 邮箱：</label> <input type="text" id="email" class="required"> </div> <div class="int"> <label>个人资料：</label> <input type="text" id="personinfo"> </div> <div class="sub"> <input id="send" type="submit" value="提交"> <input id="res" type="reset" value="重置"> </div> </form> </body>
