基于jQuery实现表单提交验证
html表单代码:
<formmethod="post"action=""> <divclass="int"> <labelfor="username">用户名:</label> <inputtype="text"id="username"class="required"/> </div> <divclass="int"> <labelfor="username">邮箱:</label> <inputtype="text"id="email"class="required"/> </div> <divclass="int"> <labelfor="username">个人资料:</label> <inputtype="text"id="personinfo"/> </div> <divclass="sub"> <inputtype="submit"value="提交"id="send"/> <inputtype="reset"id="res"/> </div> </form>
jQuery代码:
$(function(){ $("form:input.required").each(function(){ var$required=$("<strongclass='high'>*</strong>"); //$(this).parent().append($required); //追加到文档中 $(this).parent().prepend($required); }); $('form:input').blur(function(){ var$parent=$(this).parent(); if($(this).is('#username')){ if(this.value==""||this.value.length<6){ varerrorMsg='请输入至少6位的用户名'; $parent.append('<spanclass="formtipsonError">'+errorMsg+'</span>'); }else{ varokMsg='输入正确'; $parent.append('<spanclass="formtipsonSuccess">'+okMsg+'</span>'); } } if($(this).is('#email')){ if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ varerrorMsg='请输入正确的E-mail地址'; $parent.append('<spanclass="formtipsonError">'+errorMsg+'</span>'); }else{ varokMsg='输入正确'; $parent.append('<spanclass="formtipsonSuccess">'+okMsg+'</span>'); } } }); $("form:input").focus(function(){ var$parent=$(this).parent(); $parent.find(".formtips").remove(); }); $("#send").click(function(){ var$parent=$(this).parent().parent(); $parent.find(".formtips").remove(); $("form.required:input").trigger('blur'); varnumError=$('form.onError').length; if(numError){ returnfalse; } }); $("#res").click(function(){ var$parent=$(this).parent().parent(); $parent.find(".formtips").remove(); }); });
代码很简单,也很易懂,小伙伴们直接拿走用吧,这里就不详细说明了。