在单独的文件中使用 Jquery 和 js 进行表单验证答案

【问题标题】：Form validation with Jquery ans js in a seperate file在单独的文件中使用 Jquery 和 js 进行表单验证
【发布时间】：2013-03-20 17:23:13
【问题描述】：

你好，我真的被这个卡住了。

是否有人知道如何编写以下 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>

【问题讨论】：

感谢您分享您的知识。 ...为什么这会出现很多次..
url: 子句应该在rules: 选项内。但是表单中没有 URL 字段，所以应该完全省略它。
我用于 jquery-validate 的 URL 是 ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/…
您遇到了什么问题？您的标题提到将内容放在单独的文件中，但问题没有说明这一点。

标签： jquery forms validation jquery-validate

【解决方案1】：

您的代码...

name 字段的两条规则之间缺少逗号。
将url 规则放置在rules: {} 之外导致其使用不当。由于我在您的表单中没有看到任何需要此类规则的内容，因此我将其删除。
似乎完全没有插件。您实际上需要在您包含 jQuery 之后的某个位置“包含”jQuery Validate 插件：

<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
        }
    },

【讨论】：