使用easyUI中的jquery.validate.min.js外掛進行表單驗證並自定義校驗規則
阿新 • • 發佈：2019-01-30
以前使用原生的js或者jQuery寫表單驗證真的好麻煩，使用上面的easyUI外掛配合著ajax真的節省好多程式碼量
直接上程式碼
真的好麻煩。。。。。。jQuery和js也不是很會用。所以還是學會上面的表單校驗在使用下面的外掛吧，路有一步步走！<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>頁面層</title> <link rel="stylesheet" href="css/layout.css" /> <script type="text/javascript"> function formReset(){ document.getElementById("SubmitForm").reset(); } function showTips(id,info){ document.getElementById(id+"span").innerHTML="<font color='grey' size='2'>"+info+"</font>"; } function check(id,info){ //獲取使用者輸入的值 var uVlaue=document.getElementById(id).value; //進行校驗 if(uVlaue==""){ document.getElementById(id+"span").innerHTML="<font color='red' size='2'>"+info+"</font>"; }else{ document.getElementById(id+"span").innerHTML=" "; } } </script> </head> <body> <div class="head"> <h1>註冊</h1> </div> <form action="${pageContext.request.contextPath }/login" method="post" class="SubmitForm" id="SubmitForm"> 學 號 <input type="text" name="number" size="35px" id="number" onfocus="showTips('number','學號必填!')" onblur="check('number','學號不能為空！')"/> <span id="numberspan"></span><br /> 姓 名 <input type="text" name="username" size="35px" id="username" onfocus="showTips('username','使用者名稱必填!')" onblur="check('username','使用者名稱不能為空！')"/> <span id="userspan"></span><br /> <span style="margin-right: 150px; text-align: left;">性 別</span><input type="radio" name="sex" />男 <input type="radio" name="sex" />女 <br /> 所在學院 <input type="text" name="xueyuan" id="xueyuan" size="35px" onfocus="showTips('xueyuan','學院名必填！')" onblur="check('xueyuan','學院名不能為空！')" /><span id="xueyuanspan"></span><br /> 密 碼 <input type="password" size="35px" name="password" id="password" onfocus="showTips('password','密碼必填！')" onblur="check('password','密碼不能為空！')" placeholder="請輸入密碼"/><span id="passwordspan"></span><br /> 確認密碼 <input type="password" name="repassword" id="repassword" size="35px" onfocus="showTips('repassword','確認密碼')" onblur="check('repassword','確認密碼不能為空！')" placeholder="請確認密碼"/><span id="repasswordspan"></span><br /> <input type="submit" value="確認" class="button"/> <input type="button" onclick="formReset()" value="重置"> </form> </body> </html>
好了，大招來了 直接上程式碼
jQuery引入jquery.validate.min.js
$(function(){ $("#myform").validate({ rules:{ "username":{ "required":true, "checkUsername":true }, "password":{ "required":true, "rangelength":[6,12] }, "repassword":{ "required":true, "rangelength":[6,12], "equalTo":"#password" }, "email":{ "required":true, "email":true }, "sex":{ "required":true }, "name":{ "required":true }, "birthday":{ "required":true, "dateISO":true } }, messages:{ "username":{ "required":"使用者名稱不能為空", "checkUsername":"該使用者已存在" }, "password":{ "required":"密碼不能為空", "rangelength":"密碼長度6-12位" }, "repassword":{ "required":"確認密碼不能為空", "rangelength":"密碼長度6-12位", "equalTo":"兩次密碼不一致" }, "email":{ "required":"郵箱不能為空", "email":"郵箱格式不正確" }, "sex":{ "required":"沒有第三個選項" }, "name":{ "required":"姓名不能為空" }, "birthday":{ "required":"日期不能為空", "dateISO":"日期格式不正確" } } }); });
格式就是json的格式 鍵值對 key：value
$(function(){
$("表單的id").validate({
rules:{}, //規則
message:{}//錯誤提示資訊
});
});
規則如下：
有些規則上面沒有就需要自己定義，比如身份證號碼，這個外掛是國外的人寫的，他們的身份證號跟我們不一樣啊；還可以自定義用json檢驗使用者名稱是否存在
直接上程式碼
//自定義校驗規則 $.validator.addMethod( //規則的名稱 "checkUsername", //校驗的函式 function (value,element,params){ //定義一個標誌符true或者false都沒有關係只是定義 var flag=true; //value:輸入的內容 //element:被校驗的元素物件 //params:規則對應的引數值 $.ajax({ "async":false ,//是否非同步 "url":"${pageContext.request.contextPath}/checkUsername", "data":{"username":value}, "type":"POST", "dataType":"json", "success":function(data){ flag=data.isExist; //alert(flag); } }); //返回false表示校驗器不通過 return !flag; } );
語法就是
//自定義檢驗規則
$.validator.addMethod(
//規則的名稱
"checkUsername",
//檢驗的函式
function(vlaue,element,params){
//需要自定義的函式
}
);