jquery的表單驗證插件數不勝數，有時想想其實有的項目不需要引入一些插件，要有自己動手的好習慣，下面是一個簡單的表單驗證。

一、html代碼

<form name="j-form" id="j-form" method="POST"><h3>用戶登錄</h3><div class="input-item"><i class="fa fa-user fa-fw"></i><input type="text" name="username" id="Uname" placeholder="請輸入用戶名" maxlength="20"><span id="fU" style="display: none;">請輸入用戶名！</span></div><div class="input-item"><i class="fa fa-key fa-fw"></i><input type="password" name="userpwd" id="Upwd" placeholder="請輸入密碼" maxlength="16"><span id="fP" style="display: none;">請輸入密碼！</span></div><div class="radio-item clearfix"><span class="radio-con fl"><input class="magic-radio" type="radio" value="1" name="user-r" id="radion-u" checked><label for="radion-u">記住用戶</label></span><span class="radio-con fr"><input class="magic-radio" type="radio" value="2" name="user-r" id="radio-p"><label for="radio-p">記住密碼</label></span></div><div class="login-btn"><input type="submit" id="btn-login" value="登 錄"></div></form>

二、js代碼

<script>$(document).ready(function(){$("#btn-login").on("click",function(e){e=event || window.event;e.preventDefault();var userName=$("#Uname").val().trim();var userPwd=$("#Upwd").val().trim();var sta=(userName=="" && userPwd=="") && 1 || userName=="" && 2 || userPwd=="" && 3 || 4;switch (sta){case 1:$("#fU").css("display","block");$("#fP").css("display","block");/*alert("請輸入用戶名與密碼");*/break;case 2:$("#fU").css("display","block");$("#fP").css("display","none");/* alert("請輸入用戶名");*/break;case 3:$("#fP").css("display","block");$("#fU").css("display","none");/* alert("請輸入密碼");*/break;case 4:$("#fU").css("display","none");$("#fP").css("display","none");$.ajax({type:"post",url:"",dataType:"json",data:{"username":userName,"userpwd":userPwd},success:function(msg){window.location.href="";},error:function(){alert("登錄失敗！");}})$("#j-form").submit();//提交表單}})}) </script>

三、效果圖

總結

以上是生活随笔為你收集整理的自己写jquery表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。