用jquery ans js在一個單獨的文件中進行表單驗證

嗨，我真的被困在這一個。用jquery ans js在一個單獨的文件中進行表單驗證

有沒有人知道如何編寫下面的jQuery表單驗證？我相信這很簡單，但我無法想出這一個拯救我的生活。

謝謝你分享你的知識。

我需要用jquery寫下面的表單驗證。每遇到錯誤，請阻止提交表單。有4個輸入通過jQuery代碼驗證。此外，我不允許鏈接到我自己的jQuery文件。我不知道，但我認爲從驗證鏈接這個jQuery被破壞。

驗證規則如下：

輸入：用戶名;必需（是）;驗證（必須是5-10個字符長）。
輸入：電子郵件;必需（是）;驗證（必須有@符號，必須有一個句點）。
輸入：街道名稱;必需（否）;驗證（必須以數字開頭）。
輸入：出生年份;必需（是）;驗證（必須是數字）。

我的代碼看起來如下：

<!DOCTYPE html> 
<html> 
<head> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<!-- Hi JASON YOUR PLUGIN DDOE SNOT WORK!!! I used another plugin from the jquery site. 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 
--> 
<script type="text/javascript" src=""></script> 


    <script type="text/javascript"> 

$(document).ready(function() { 

    $("#form1").validate({ 

     rules: { 
      name: { 
       required: true, 
       minlength: 5 
       maxlength: 10 
      }, 
      address: { 
       number: true, 
      }, 
      email: {// compound rule 
       required: true, 
       email: true 
      } 
     }, 

     url: { 
      url: true 
     }, 

     messages: { 
      name: { 
       minlength: jQuery.format("At least {0} characters required.") 
      } 
     }, 

     highlight: function(element, errorClass, validClass) { 

      $(element).addClass(errorClass).removeClass(validClass); 
      $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); 

      setTimeout(function() { 

       $(element).removeClass(errorClass).addClass(validClass); 
       $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); 

      }, 1000); 

     } 

    }); 

}); 


    </script> 



</head> 
<body> 


    <form id="form1" method="post" action=""> 
     <div class="form-row"><span class="label">Username *</span><input type="text" name="name" /></div> 
     <div class="form-row"><span class="label">Email address </span><input type="text" name="email" /></div> 
     <div class="form-row"><span class="label">Street address *</span><input type="text" name="address" /></div> 
     <div class="form-row"><span class="label">Year of birth</span><input type="text" name="date" /></div> 

     <div class="form-row"><input class="submit" type="submit" value="Submit"></div> 
    </form> 



</body> 
</html>

來源

2013-03-29 tidydee

_Thank你爲你分享你的knowledge._ ......爲什麼會出現多次.. –

的'網址：'條款應該是'規則裏面：'選項。但是表單中沒有URL字段，所以應該完全忽略它。 – Barmar

我用於jquery-validate的URL是http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js – Barmar

你的代碼...

失蹤了兩個規則之間的逗號您name場。
不正確地使用url規則，因爲它的在之外rules: {}。由於我的表單中沒有任何要求這樣的規則，我只是刪除它。
似乎完全缺少插件。實際上你需要「列入」 jQuery驗證後插件某處您包括jQuery的：

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>

否則，你的代碼，因爲你提出的，現在工作： http://jsfiddle.net/4FGmx/

$(document).ready(function() { $("#form1").validate({ rules: { name: { required: true, minlength: 5, maxlength: 10 }, address: { number: true }, email: { required: true, email: true } }, messages: { name: { minlength: jQuery.format("At least {0} characters required.") } }, highlight: function (element, errorClass, validClass) { $(element).addClass(errorClass).removeClass(validClass); $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); setTimeout(function() { $(element).removeClass(errorClass).addClass(validClass); $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); }, 1000); } }); });

根據您的規則規範，您可以執行以下操作。注意使用rangelength規則而不是使用minlength和maxlength。 See documentation for all available rules。

如果你希望你的address場只到「開始與一些」，那麼你就需要刪除number規則和寫自己的自定義正則表達式的功能和使用the addMethod method其納入。

演示：http://jsfiddle.net/4FGmx/1/

rules: { name: { required: true, rangelength: [5,10] }, address: { mycustomrule: true }, email: { required: true, email: true }, date: { required: true, number: true } },

來源

2013-03-30 00:55:25 Sparky

用jquery ans js在一個單獨的文件中進行表單驗證

回答

相關問題