1

我正在使用 jQuery 进行简单的表单验证

事实上，我使用 jQuery 插件来验证电子邮件地址字段，现在我想对name我也尝试过的字段进行单独验证，但它不起作用，我无法找出背后的问题。

<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>

<link rel="stylesheet" href="main.css" type="text/css" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
   $( "#myform" ).validate({
           rules: {
                   name: {
                           required: true,
                           minlength: 4,
                           maxlength: 20,
                           customvalidation: true
                   }
           },
           messages: {
                   name: {
                           required: "Dude, enter a name",
                           minlength: $.format("Keep typing, at least {0} characters required!"),
                           maxlength: $.format("Whoa! Maximum {0} characters allowed!")
                   }
           }
   });
   $.validator.addMethod("customvalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Sorry, no special characters allowed"
   );
});
</script>
</head>

<body>
<div id="navbar">
    <ul id="nav">
        <li><a id="clickBack" href="backPage.htm">clickBack</a></li>
        <li><a id="clickForward" href="forwardPage.htm">goForward</a></li>
    </ul>
</div><br><br>
<label for="field"> Name: </label>
<input class="left" id="name" name="name" minlength="4" class="required name"/>
<br/>
<form id="myform" method="post" action="">
<label for="field">Email: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});

</script>

</body>
</html>

需要一些指导...谢谢。

4

2 回答 2

3

尝试使用这个最好的 JQuery 验证插件 

username: {
        required: true,
        minlength: 2
        },

messages: {
        username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
        },

如果你想要自定义验证，你可以试试这个：

 $.validator.addMethod("customvalidation", function(value, element) {
        return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
    }, "Username must contain only letters, numbers, or dashes.");
于 2013-09-23T12:10:42.190 回答
1

您好，有几点可能有助于这项工作：

  • 尝试使用不是“保留”或不明确的 id（因为name它已经是元素的属性，它可能会产生误导。当我让你的脚本在我身边工作时，它可以id="firstName"用于例如，但不是id="name"）
  • 确保您正在验证的元素在您正在运行验证的表单中（在您的代码示例中，名称元素位于外面myform
  • 将这两种$("#myform").validate(...)方法组合在两个不同的脚本块中，您不需要单独的电子邮件和姓名，您可以将它们一起列出！

希望对你有帮助，祝你好运！

于 2013-09-23T12:24:57.617 回答