生活随笔
收集整理的這篇文章主要介紹了
Jquery插件入门之Validate插件的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
一、jQuery插件
1.jQuery插件概述
2.Validate插件
一、jQuery插件
1.jQuery插件概述
-
jQuery插件機制概述
-
jQuery插件機制語法
jQuery.fn.extend({"check":function(){return this.each(function (index,ele) {ele.checked = true;});},"自定義方法名稱":function () {// 處理對象的邏輯return this.each(function (index,ele) {ele.checked = false;});}}); jQuery.extend({"min":function (i,j) {return i>j?j:i;},"max":function (i,j) {return i>j?i:j;}
}); ?
2.Validate插件
<!DOCTYPE html>
<!--suppress XmlInvalidId -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的jquery表單校驗頁面</title><style type="text/css">p{text-align: center;font-size:24px;}table{margin: 0 auto;border: 0;}table tr{height:40px;border:0;}table tr td{padding:0 14px;border:1px solid #999}.error{color:red}</style><script type="text/javascript" src="js/jquery-3.3.1.js"></script><script type="text/javascript" src="js/jquery.validate.min.js"></script><script type="text/javascript">//自定義校驗器//校驗器的名稱為: cardLength//作用: 校驗身份證號長度為15位 或 18位$.validator.addMethod("cardLength",function (val,ele,params) {if(params){if(val.length==15||val.length==18){return true;}}},"請輸入15位或18位的身份證號")
?
?$(function(){$("#empForm").validate({rules:{realname:"required",username:{required:true,rangelength:[5,8]},psw:{required:true,rangelength:[6,12]},psw2:{equalTo:"#psw"},gender:{required:true},age:{required:true,number:true,range:[26,50]},edu:{required:true},checkbox1:{required:true},email:{email:"email"},card:{cardLength:true}},messages:{realname:"姓名不能為空",username:{required:"登錄名不能為空",rangelength:"登陸名長度為${0}-${1}位"},psw:{required:"密碼不能為空",rangelength:"密碼長度為${0}-${1}位"},psw2:{equalTo:"密碼前后不一致"},gender:{required:"必須其一"},age:{required:"年齡不能為空",number:"年齡必須為數字",range:"年齡必須在${0}到${1}之間"},edu:{required:"學歷不能為空"},email:{email:"郵箱格式不對"}}})});</script>
?
</head>
<body><p>員工信息錄入</p><form name="empForm" id="empForm" method="post" action="test.html"><table border=1><tr><td>真實姓名(不能為空 ,沒有其他要求)</td><td><input type="text" id="realname" name="realname" /></td></tr><tr><td>登錄名(登錄名不能為空,長度應該在5-8之間,可以包含中文字符(一個漢字算一個字符)):</td><td><input type="text" id="username" name="username" /></td></tr><tr> <td>密碼(不能為空,長度6-12字符或數字,不能包含中文字符):</td><td><input type="password" id="psw" ?name="psw" /></td></tr><tr> <td>重復密碼密碼(不能為空,長度6-12字符或數字,不能包含中文字符):</td><td><input type="password" id="psw2" name="psw2" /></td></tr><tr><td>性別(必選其一)</td><td><input ?type="radio" id="gender_male" value="m" name="gender"/> 男 <input ?type="radio" id="gender_female" value="f" name="gender"/> 女<label class="error" for="gender" style="display: none;">必須選擇一個性別</label></td></tr><tr><td>年齡(必填26-50):</td><td><input type="text" id="age" name="age" /></td></tr><tr> <td>你的學歷:</td><td> <select name="edu" id="edu"><option value="">－請選擇你的學歷－</option><option value="a">專科</option><option value="b">本科</option><option value="c">研究生</option><option value="e">碩士</option><option value="d">博士</option></select></td></tr><tr> <td>出生日期(1982/09/21):</td><td><input type="date" id="birthday" ?name="birthday" value="" /></td></tr><tr> <td>興趣愛好:</td><td colspan="2"> <input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球 <input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球 <input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上網 <input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游 <input type="checkbox" name="checkbox1" id="qq5" value="4" /> 購物 <label class="error" for="checkbox1" style="display: none;">必須選一個</label></td></tr><tr> <td align="left">電子郵箱:</td><td><input type="text" id="email" name="email" /></td></tr><tr> <td align="left">身份證(15-18):</td><td><input type="text" id="card" name="card" /></td></tr><tr><td></td><td><input type="submit" ?name="firstname" ?id="firstname" value="保存"></td></tr></table>
?
</form>
</body>
</html>
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔為你收集整理的Jquery插件入门之Validate插件的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
