jquery實現登入驗證
阿新 • • 發佈:2019-02-09
仿著例子 可以實現登入 驗證
直接上程式碼
<script type="text/javascript"> //<![CDATA[ $(function(){ //文字框失去焦點後 $('form :input').blur(function(){ var $parent = $(this).parent(); $parent.find(".formtips").remove(); //驗證使用者名稱是否為空 if( $(this).is('#userId') ){ g if( this.value=="" || this.value.length >16 ){ var errorMsg = '不能為空'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); } } //驗證密碼是否為空 if( $(this).is('#pwd') ){ if( this.value=="" ){ var errorMsg = '不能為空'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); });//end blur //提交,最終驗證。 $('#login').click(function(){ $("form :input.required").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } }); }) //]]> </script>
<form method="post" action="<%=basePath %>LoginServlet" id="loginForm"> <h3>如有帳號,請登入</h3> <input type="hidden" name="apply" value="1"/> <div class="input-text"><label><p>帳號:</p><input type="text" name="userId" id="userId" maxlenth="15" class="required one1" placeholder="請輸入帳號,支援中文/英文" ></label></div> <div class="input-text"><label><p>密碼:</p><input type="password" name="pwd" id="pwd" class="required one2" placeholder="請輸入密碼" ></label></div> <div class="input-btn"><input type="submit" value="登入" class="login-btn" id="login"><span><a href="http://www.lingdi888.com/getpwd.jsp">忘記密碼?</a></span></div> </form>