使用 jquery 进行验证答案

【问题标题】：validation using jquery使用 jquery 进行验证
【发布时间】：2010-04-05 22:43:41
【问题描述】：

我正在尝试使用 jquery 验证 html 页面，但没有任何反应。这是一个简单的页面，但文本框未经过验证。

这是代码：

<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="~/jquery.js/"></script>
<script type="text/javascript" src="~/jquery-validate/jquery.validate.js/"></script>
<script type="text/javascript">
  $(document).ready(function(){
    var validator = $("#submitForm").validate({
            debug: true,
            rules: {
                author: "required",
                quote: "required"
            },
            messages: {
                author: "Name of Author required"
                quote: "Please enter Quote"
            },
            errorPlacement: function(error, element) {
                error.appendTo( element.parent().top() );
            }
      );
  });
  </script>

<body>

<div class="container">
<div class="center_div">
<h2>Submit Your Quote</h2>
<fieldset>
<form id="submitForm" action="qinsert.php" method="post">
<div class="error" style="display:none"></div>
<div class="field">
<label>Author: </label>
<input name="author" type="text" class="required" minLength=3>
<span class="error"></span>
</div><br />
<div class="field">
<label>Quote: </label>
<textarea name="quote" cols=22 class="required" minLength=5></textarea>
<span class="error"></span>
<br />
</div>
<input id="button1" type="submit" value="Submit" class="submit" /><br />
<input id="button2" type="reset" value="Reset" /> 
</form>
</fieldset>
</div>
</div>

代码有什么问题？谢谢！

【问题讨论】：

标签： php jquery html validation

【解决方案1】：

快速浏览一下，您的 javascript 中似乎缺少一个结束“}”。我认为您没有正确关闭 validate({ 尝试在 ); 前面添加 } 大括号在errorPlacement函数之后。

  $(document).ready(function(){ 
var validator = $("#submitForm").validate({ 
        debug: true, 
        rules: { 
            author: "required", 
            quote: "required" 
        }, 
        messages: { 
            author: "Name of Author required" 
            quote: "Please enter Quote" 
        }, 
        errorPlacement: function(error, element) { 
            error.appendTo( element.parent().top() ); 
        } 
  }); 
  });

【讨论】：

请参阅您的答案帖子的评论以进一步解释脚本标签 src 属性

【解决方案2】：

之前没用过jquery验证插件，但是这里明显少了一个逗号：

messages: 
{
            author: "Name of Author required",
            quote: "Please enter Quote"
},

手头没有这个插件，所以我现在无法获得示例运行代码。

我个人觉得声明式的验证方式对我更有吸引力，这意味着您可以在 html 中声明式地标记它们，而不是直接将验证要求放入您的 javascript 代码中。然后验证引擎将检查每个必填字段等...

如果你觉得这听起来很合理，那么我推荐另一个验证插件： jQuery inline validation

【讨论】：

【解决方案3】：

检查 jQuery 库的路径。它们位于名为~ 并以/ 为后缀的目录中似乎不太可能。如果它们在同一目录中，则正确的语法是：

<script type="text/javascript" src="jquery.js"></script>

【讨论】：