分別使用js和JQuery的validate外掛實現簡單的表單校驗
阿新 • • 發佈:2018-12-10
1.1html
在input標籤後面使用<span>標籤顯示校驗資訊,使用onfocus(聚焦)和onblur(離焦)事件實現動態顯示提示資訊。
<form action="#" method="get" onsubmit="return checkForm()"> <table border="1" align="center" width="700px" height="400" cellspacing="0px" cellpadding="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"><font size="4">會員註冊</font> USER REGISTER</td> </tr> <tr height="40px"> <td>使用者名稱</td> <td><input type="text" name="name" size="34px" id="name" class="check" onfocus="showTips('name','使用者名稱必填')" onblur="check('name','使用者名稱不能為空')" /> <span id="namespan"></span> </td> </tr> <tr height="40px"> <td>密碼</td> <td><input type="password" name="password" size="34px" class="check" id="password" onfocus="showTips('password','密碼必填')" onblur="check('password','密碼不能為空')" /> <span id="passwordspan"></span> </td> </tr> <tr height="40px"> <td>確認密碼</td> <td><input type="password" name="repassword" size="34px" class="check" id="repassword" onfocus="showTips('repassword','密碼必填')" onblur="check('repassword','密碼不能為空')"/> <span id="repasswordspan"></span> </td> </tr> <tr height="40px"> <td>Email</td> <td><input type="text" name="email" size="34px" id="email" /></td> </tr> <tr height="40px"> <td>姓名</td> <td><input type="text" name="username" size="34px" /></td> </tr> <tr height="40px"> <td>性別</td> <td><input type="radio" value="0" name="sex" />女 <input type="radio" value="1" name="sex" />男</td> </tr> <tr height="40px"> <td>出生日期</td> <td><input type="text" name="birthday" size="34px" /></td> </tr> <tr height="40px"> <td>驗證碼</td> <td><input type="text" name="code" size="22px" /> <img alt="" src="../img/yanzhengma.png"></td> </tr> <tr height="40px"> <td colspan="2"><input type="submit" value="註冊"></td> </tr> </table> </form>
1.2js部分
<script type="text/javascript"> function checkForm() { var state=true; var inputs=document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ if(inputs[i].className=="check"){ var input=inputs[i].id; if(check(input,"請完成註冊")==false){ state=false; } } } if(!state){ return false; } } function showTips(id,info) { document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; } function check(id,info) { var nValue = document.getElementById(id).value; var state=true; if(nValue==""){ document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; state=false; }else{ document.getElementById(id+"span").innerHTML=""; } return state; } </script>
1.3JQuery部分
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <!--引入validate外掛js檔案--> <script type="text/javascript" src="../js/jquery.validate.min.js" ></script> <!--引入國際化js檔案--> <script type="text/javascript" src="../js/messages_zh.js" ></script> <script> $(function(){ $("#registForm").validate({ rules:{ user:{ required:true, minlength:3 }, password:{ required:true, digits:true, minlength:6 }, repassword:{ required:true, digits:true, minlength:6, equalTo:"[name='password']" }, email:{ required:true, email:true }, username:{ required:true, minlength:2 }, sex:{ required:true } }, messages:{ user:{ required:"使用者名稱必填", minlength:"使用者名稱不得小於3位" }, password:{ required:"密碼不能為空", digits:"密碼必須為整數", minlength:"密碼不得小於6位" }, repassword:{ required:"確認密碼不能為空!", digits:"密碼必須是數字!", minlength:"密碼長度不得低於6位!", equalTo:"兩次密碼不一致!" }, email:{ required:"郵箱不能為空!", email:"郵箱格式不正確!" }, username:{ required:"姓名不能為空!", minlength:"姓名不得少於2個字元!" }, sex:{ required:"性別必須勾選!" } }, errorElement: "label", //用來建立錯誤提示資訊標籤 success: function(label) { //驗證成功後的執行的回撥函式 //label指向上面那個錯誤提示資訊標籤label label.text(" ") //清空錯誤提示訊息 .addClass("success"); //加上自定義的success類 } }) }) </script>
注意:<input type="radio" >時要在後面加上label標籤,否則提示資訊會顯示在第一個<input>標籤後面
<td>
性別
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
</span>
</td>