jQuery驗證框架（八）應用實例 (jQuery validation)

時間  2019-12-07
標籤 jquery 驗證 框架 應用 實例 validation 欄目 JQuery 简体版
原文   原文鏈接

jQuery驗證框架

8、應用實例

[1] 驗證頁面javascript

Html代碼
  1. <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>  
  2. <html>  
  3.   <head>  
  4.     <title>jquery驗證框架</title>  
  5.     <link rel="stylesheet" type="text/css" href="css/index.css">  
  6.     <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  7.     <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  8.     <script type="text/javascript" src=js/jquery.form.js></script>  
  9.     <script type="text/javascript" src=js/valid.js></script>  
  10.     <style type="text/css">  
  11.         label { width: 10em; float: left; }  
  12.         label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}  
  13.         input.haha { border: 1px solid red; }  
  14.         label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}  
  15.         input.focus { border: 2px solid green; }  
  16.         ul li{ display: block;}  
  17.     </style>  
  18.   </head>  
  19.     
  20.   <body>  
  21.     
  22.   <div id="form_con">  
  23.         <form class="cmxform" id="myform" method="post" action="">  
  24.             <table cellspacing="0" cellpadding="0">  
  25.                 <tbody>  
  26.                     <tr>  
  27.                         <td>用戶名</td>  
  28.                         <td><input type="text" name="username" class="required" /></td>  
  29.                         <td></td>  
  30.                     </tr>  
  31.                     <tr>  
  32.                         <td>密碼</td>  
  33.                         <td><input id="password" type="password" name="firstpwd" /></td>  
  34.                         <td></td>  
  35.                     </tr>  
  36.                     <tr>  
  37.                         <td>驗證密碼</td>  
  38.                         <td><input type="password" name="secondpwd" /></td>  
  39.                         <td></td>  
  40.                     </tr>  
  41.                     <tr>  
  42.                         <td>性別</td>  
  43.                         <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>  
  44.                         <td></td>  
  45.                     </tr>  
  46.                     <tr>  
  47.                         <td>年齡</td>  
  48.                         <td><input type="text" name="age" /></td>  
  49.                         <td></td>  
  50.                     </tr>  
  51.                     <tr>  
  52.                         <td>郵箱</td>  
  53.                         <td><input type="text" name="email" /></td>  
  54.                         <td></td>  
  55.                     </tr>  
  56.                     <tr>  
  57.                         <td>我的網頁</td>  
  58.                         <td><input type="text" name="purl" /></td>  
  59.                         <td></td>  
  60.                     </tr>  
  61.                     <tr>  
  62.                         <td>電話</td>  
  63.                         <td><input type="text" name="telephone" /></td>  
  64.                         <td></td>  
  65.                     </tr>  
  66.                     <tr>  
  67.                         <td>附件</td>  
  68.                         <td><input type="file" name="afile"/></td>  
  69.                         <td></td>  
  70.                     </tr>  
  71.                     <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>  
  72.                 </tbody>            
  73.             </table>  
  74.         </form>  
  75.   </div>    
  76.   </body>  
  77. </html>  


[2] 驗證jscss

Js代碼
  1. $(function(){  
  2.     var validator = $("#myform").validate({  
  3.         debug: true,       //調試模式取消submit的默認提交功能  
  4.         errorClass: "haha",//默認爲錯誤的樣式類爲：error  
  5.         focusInvalid: false,  
  6.         onkeyup: false,  
  7.         submitHandler: function(form){   //表單提交句柄,爲一回調函數，帶一個參數：form  
  8.             alert("提交表單");  
  9.             //form.submit();   提交表單  
  10.         },  
  11.         rules: {           //定義驗證規則,其中屬性名爲表單的name屬性  
  12.             username: {  
  13.                 required: true,  
  14.                 minlength: 2,  
  15.                 remote: "uservalid.jsp"  //傳說當中的ajax驗證  
  16.             },  
  17.             firstpwd: {  
  18.                 required: true,  
  19.                 //minlength: 6  
  20.                 rangelength: [6,8]  
  21.             },  
  22.             secondpwd: {  
  23.                 required: true,  
  24.                 equalTo: "#password"  
  25.             },  
  26.             sex: {  
  27.                 required: true  
  28.             },  
  29.             age: {  
  30.                 required: true,  
  31.                 range: [0,120]  
  32.             },  
  33.             email: {  
  34.                 required: true,  
  35.                 email: true  
  36.             },  
  37.             purl: {  
  38.                 required: true,  
  39.                 url: true  
  40.             },  
  41.             afile: {  
  42.                 required: true,  
  43.                 accept: "xls,doc,rar,zip"  
  44.             }  
  45.         },  
  46.         messages: {       //自定義驗證消息  
  47.             username: {  
  48.                 required: "用戶名是必需的！",  
  49.                 minlength: $.format("用戶名至少要{0}個字符！"),  
  50.                 remote: $.format("{0}已經被佔用")  
  51.             },  
  52.             firstpwd: {  
  53.                 required: "密碼是必需的！",  
  54.                 rangelength: $.format("密碼要在{0}-{1}個字符之間！")  
  55.             },  
  56.             secondpwd: {  
  57.                 required: "密碼驗證是必需的！",    
  58.                 equalTo: "密碼驗證須要與密碼一致"  
  59.             },  
  60.             sex: {  
  61.                 required: "性別是必需的"  
  62.             },  
  63.             age: {  
  64.                 required: "年齡是必需的",  
  65.                 range: "年齡必須介於{0}-{1}之間"  
  66.             },  
  67.             email: {  
  68.                 required: "郵箱是必需的！",  
  69.                 email: "請輸入正確的郵箱地址（例如 myemail@163.com）"  
  70.             },  
  71.             purl: {  
  72.                 required: "我的主頁是必需的",  
  73.                 url: "請輸入正確的url格式,如 http://www.domainname.com"  
  74.             },  
  75.             afile: {  
  76.                 required: "附件是必需的！",  
  77.                 accept: "只接收xls,doc,rar,zip文件"  
  78.             }  
  79.         },  
  80.         errorPlacement: function(error, element) {  //驗證消息放置的地方  
  81.             error.appendTo( element.parent("td").next("td") );  
  82.         },  
  83.         highlight: function(element, errorClass) {  //針對驗證的表單設置高亮  
  84.             $(element).addClass(errorClass);  
  85.         },  
  86.         success: function(label) {    
  87.                     label.addClass("valid").text("Ok!")    
  88.             }    
  89.           
  90.         /*, 
  91.         errorContainer: "#error_con",               //驗證消息集中放置的容器 
  92.         errorLabelContainer: "#error_con ul",       //存放消息無序列表的容器 
  93.         wrapper: "li",                              //將驗證消息用無序列表包圍 
  94.         validClass: "valid",                        //經過驗證的樣式類 
  95.         errorElement: "em",                         //驗證標籤的名稱，默認爲：label 
  96.         success: "valid"                            //驗證經過的樣式類 
  97.         */  
  98.     });  
  99.     $("button").click(function(){  
  100.         validator.resetForm();  
  101.     });  
  102.     //alert($("#password").rules()["required"]);  
  103.     //validator.showErrors({"username": "用戶名是必需的"});  
  104.     /*$("button").click(function () { 
  105.         var str = "Hello {0}, this is {1}"; 
  106.         alert("'" + str + "'"); 
  107.         str = $.validator.format(str, ["koala","oo"]); 
  108.         alert("'" + str + "'"); 
  109.     });*/  
  110.               
  111. });   


[3] 遠程驗證程序html

Java代碼
  1. <%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%  
  2.     String username = request.getParameter("username");  
  3.     PrintWriter pw = response.getWriter();  
  4.     try{  
  5.         if(username.toLowerCase().equals("admin")){  
  6.             pw.println("true");  
  7.         }else{  
  8.             pw.println("false");  
  9.         }  
  10.     }catch(Exception ex){  
  11.         ex.getStackTrace();  
  12.     }finally{  
  13.         pw.flush();  
  14.         pw.close();  
  15.     }  
  16. %>  


[4] 驗證效果





java

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程