用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在一个单独的文件中进行表单验证

回答

相关问题