이 글에서는 양식 검증을 완료하기 위한 jQuery의 예제 코드를 주로 소개합니다. 코드가 간단하고 이해하기 쉽습니다. 필요한 친구들이 참고하여 jQuery를 사용하여 양식 검증 기능을 완성할 수 있기를 바랍니다.
더 이상 말도 안되는 코드를 게시하겠습니다. 구체적인 코드는 다음과 같습니다.
<!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="jquery/jquery.js" type="text/javascript"></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(".formtips").remove(); if($(this).is("#username")){ if(this.value==""||this.value.length<6){ var errorMsg='请输入至少六位的用户名'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg='输入正确'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); return false; } } 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 onSuccess">'+okMsg+'</span>'); } } }); $("#send").click(function() { $("form .required:input").trigger('blur'); var numError=$("form .onError").length; if(numError){ return false; } alert("注册成功,密码已发到你的邮箱,请查收。"); }); }); </script> </head> <body> <form method="post" action=""> <p class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required" /> </p> <p class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" /> </p> <p class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo" /> </p> <p class="sub"> <input type="submit" value="提交" id="send"/><input type="reset" id="res"/> </p> </form> </body> </html>
관련 권장 사항:
AngularJS는 양식 확인 휴대폰 번호 기능을 구현합니다.
위 내용은 jQuery 완성 양식 유효성 검사 기능의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!