夜夜操网站,狠狠久久综合

jquery validate 使用示范

2013.12.06

最近應(yīng)公司要求做了一個(gè)jquery的示例文件，包括：模態(tài)窗口怎么實(shí)現(xiàn)；jqueryvalidate下的校驗(yàn)；怎么做圖片特效；怎么實(shí)現(xiàn)異步操作；實(shí)現(xiàn)圖片上傳剪切效果等很多特效；
這里把jquery校驗(yàn)的部分傳上來與大家分享，直接復(fù)制出來就可以正常使用（沒有后臺(tái)異步校驗(yàn)沒有意義，所以未上傳，如有需要qq聯(lián)系）
文中需要用到的jquery validate的文件做校驗(yàn)
有什么不明白的地方可以參考我的博文 jquery校驗(yàn)詳解

代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>validateDemo.html</title>

   <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="this is mypage">
   <meta http-equiv="content-type" content="text/html;charset=UTF-8">


   
   <link rel="stylesheet" type="text/css"href="../js/jQuery/validate/validation.css">
   <script type="text/javascript"src="../js/jQuery/jquery.js"></script>
   <script type="text/javascript"src="../js/jQuery/validate/jquery.validate.pack.js"></script>
   
   <script type="text/javascript"src="../js/jQuery/validate/additional-methods.js"></script>
   
   <script type="text/javascript"src="../js/jQuery/validate/messages_cn.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         //通過id查找要進(jìn)行校驗(yàn)的表單
         $("#signupForm").validate({
            //設(shè)置校驗(yàn)觸發(fā)的時(shí)機(jī),默認(rèn)全是true。不要嘗試去設(shè)置它為true，可能會(huì)有js錯(cuò)誤。
            //onsubmit:false,
            //onfocusout:false,
            //onkeyup:false,
            //onclick:false,

            //驗(yàn)證通過后執(zhí)行的動(dòng)作
            //success:function(label){
            //   label.text("ok!").addClass("success");
             //},
            //手動(dòng)設(shè)置錯(cuò)誤信息的顯示方式
            errorPlacement: function(error, element) {
               error.appendTo(element.parent().next());
              //    if (element.is(":radio") )
             //      error.appendTo( element.siblings("span") );
            //    else if (element.is(":checkbox") ){
             //      error.appendTo ( element.siblings("span") );
            //    }
             //       else
             //      error.appendTo( element.parent() );
             }
             ,
            rules:{
            username:{
                required:true,
                rangelength:[ 5, 7 ]
             },
             password:{
                required:true,
                minlength:5
             },
            confirm_password: {
                required:true,
                minlength:5,
                equalTo:"#password"
             },
             sex: {
                required:true
             },

             email:{
                required:true,
                email:true
             },
             language:{
                required:true,
               rangelength:[2,3]
             },
             book:{
                required:true,
               rangelength:[2,3]
             },
             agree:"required",
             upload:{
                required:true,
                accept:"flv|jpg"
             }
          },
         //校驗(yàn)提示信息
          messages:{
             username:{
             required:"請(qǐng)輸入用戶名",
             rangelength:"用戶名長(zhǎng)度必須為{0}到{1}個(gè)字符或漢字"
          },
          password:{
             required:"請(qǐng)輸入密碼",
             minlength:"密碼的最小長(zhǎng)度是{0}個(gè)字符"
          },
         confirm_password: {
             required:"請(qǐng)輸入確認(rèn)密碼",
             minlength:"確認(rèn)密碼的最小長(zhǎng)度是{0}個(gè)字符",
             equalTo:"確認(rèn)密碼與密碼不相等"
          },
          email:"請(qǐng)輸入正確的郵箱",
          language:{
             required:"該項(xiàng)必須填寫",
             rangelength:"請(qǐng)您選擇{0}到{1}項(xiàng)語(yǔ)言"
          },
          book:{
             required:"該項(xiàng)必須選擇",
            rangelength:"請(qǐng)您選擇{0}到{1}本書"
          },
          agree:"您沒有同意使用協(xié)議",
          upload:{
                required:"請(qǐng)輸入上傳文件的路徑",
                accept:"上傳文件的格式只能是 flv或jpg"
             }
       }
    });
       })
   </script>
   


</head>
<bodystyle="font-family:'宋體','Arial Narrow';
      font-size:12px;
      ">



   

   <form class="cmxform" id="signupForm" method="get"action="">

   <fieldset >
      <legend>字段校驗(yàn)、日歷控件完整示例</legend>
      <table>
      <tr>
         <td><labelfor="username">Username</label></td>
         <td><inputid="username" name="username"/></td>
         
         <td></td>
      </tr>
      <tr>
         <td><labelfor="password">Password</label></td>
         <td><inputid="password" name="password" type="password"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="confirm_password">Confirmpassword</label></td>
         <td><inputid="confirm_password" name="confirm_password" type="password"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="sex">sex</label></td>
         <td><pre><inputid="sex1" name="sex" type="radio"/>男              <input id="sex2" name="sex" type="radio"/>女</pre></td>
         <td></td>
      </tr>

      <tr>
         <td><labelfor="email">Email</label></td>
         <td><input id="email"name="email"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="upload">Upload</label></td>
         <td><input type="file"name="upload"/></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="language">language</label></td>
         <td><inputtype="checkbox" name="language" value="cn"/>漢語(yǔ)
         <input type="checkbox" name="language" value="en"/>英語(yǔ)
         <input type="checkbox" name="language" value="jp"/>日語(yǔ)
         <input type="checkbox" name="language" value="ge"/>德語(yǔ)
         </td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="book">book</label></td>
         <td><selectname="book" multiple="multiple" >
         <optionvalue="en">英語(yǔ)書</option>
         <optionvalue="cn">漢語(yǔ)書</option>
         <optionvalue="jp">日語(yǔ)書</option>
         <optionvalue="ge">德語(yǔ)書</option>
         </select></td>
         <td></td>
      </tr>
      <tr>
         <td><labelfor="agree">同意該協(xié)議</label></td>
         <td><inputtype="checkbox" class="checkbox" id="agree" name="agree"/>
         </td>
         <td></td>
      </tr>
      <tr>
         <td><inputclass="submit" type="submit" value="Submit"/></td>
      </tr>
      </table>
   </fieldset>
   </form>

   







</body>
</html>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

jquery?validate?使用示范

js表單驗(yàn)證

jquery的驗(yàn)證插件

實(shí)例講解表單驗(yàn)證插件Validation的應(yīng)用

jQuery插件validate(表單驗(yàn)證)

[jQuery]使用jQuery.Validate進(jìn)行客戶端驗(yàn)證（高級(jí)篇

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区