0

嗨，我真的坚持这个。

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

1 回答 1

0

你的代码...

  • 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规则而不是使用minlengthand maxlength。 有关所有可用规则，请参阅文档。

如果您希望您的address字段仅“以数字开头”，那么您需要删除number规则并编写自己的自定义正则表达式函数并使用methodaddMethod合并它。

演示：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-30T00:55:25.827 回答