最简单的 JQuery 验证规则示例

Posted

技术标签:

【中文标题】最简单的 JQuery 验证规则示例【英文标题】：Simplest JQuery validation rules example 【发布时间】：2010-10-13 14:45:21 【问题描述】：

以下 html 表单成功地利用了 jQuery 的表单验证，如果留空，则在表单字段的右侧显示“此字段为必填项”，如果输入的字符少于 2 个，则显示“请输入至少 2 个字符”。但是，我不想使用“cname”表单输入字段上的 class 和 minlength 属性来指定验证元数据，而是使用 jQuery 的“rules”API，其中规则在 validate 函数的主体中指定。提前致谢：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="/lib/js/jquery.js"></script>
  <script src="/lib/js/jquery.validate.js"></script>
  <script>
  $(document).ready(function()$("#commentForm").validate(
    /*
     rules/messages here
    */
    );
    );
  </script>
</head>
<body>

 <form id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

【问题讨论】：

我觉得很有帮助 结束这个问题是“有问题的” 很抱歉，如果投票重新提出我的问题似乎是自私的。如果我因提出一个已关闭但仍获得 100K 浏览量（截至 2013 年 7 月不到 12K 浏览量）的问题而获得新的“白金”徽章，我将撤销我的投票。即使这个问题没有更多的答案，我认为它不应该有作为一个封闭问题的“耻辱”。 @GeorgeJempty - 因为看起来我们都因为关闭 this question 而被否决了，所以请保持平衡：) @LittleBobbyTables 啊，好吧，我以前从来没有成为恶意投票的受害者（或者如果我不知道的话） 【参考方案1】： 
rules: 
    cname: 
        required: true,
        minlength: 2
    
,
messages: 
    cname: 
        required: "<li>Please enter a name.</li>",
        minlength: "<li>Your name is not long enough.</li>"

【讨论】：

您好，感谢您的努力。但是我无法让它工作。实际上，我之前曾多次尝试过类似的事情，这就是我在 SO 上发布的原因。正在编辑原始问题以指示我已上传到我的网站之一的 HTML 文件的位置 好的，规则块的末尾需要一个逗号，在消息块之前，两个块都需要花括号。这纠正了简单的 javascript 错误，我已经在线更新了 HTML-2 文件，但验证仍然不起作用:( 我确定它很简单，只需要通过这个【参考方案2】：

this blog post 中包含的示例可以解决问题。

【讨论】：

我正在积极主动地添加指向 web.archive.org 上存档文章的链接，以防原始链接失效：web.archive.org/web/20120108075037/http://www.raymondcamden.com/… 你应该清理这个链接只有答案。【参考方案3】： 
$("#commentForm").validate(
    rules: 
     cname :  required : true, minlength: 2 
    
);

应该是这样的，我刚刚在编辑器中输入了这个，所以可能是一两个语法错误，但你应该能够遵循模式和documentation

【讨论】：

【参考方案4】：

标记中的输入缺少"type"，输入（我假设的文本）具有属性name="name" 和ID="cname"，Ayo 提供的代码调用名为“cname”的输入*它应该是“名字”.

【讨论】：

以上是关于最简单的 JQuery 验证规则示例的主要内容，如果未能解决你的问题，请参考以下文章

jQuery基础学习06 jQuery表单验证插件-Validation

jQuery插件的使用和写法

如何使用 jquery 验证插件动态添加验证规则

Jquery Validate 默认校验规则及常用的自定义验证规则

jquery.validate.js使用之自定义表单验证规则

在 jquery 中编写 parsley 验证规则