感谢您查看此问题。
在这里，我正在尝试验证注册表单并使用此插件http://jqueryvalidation.org/
<form id = 'signupForm' name ='signupForm' method='post' action='/signupUser'>
<table class='bttable'>
<tr >
<td class='btheight btalign tw'>
<input id = "fName" name = "fName" class ='ep' type = "textbox" placeholder="Given Name"></input>
</td>
</tr>
<tr>
<td>
<div id='errorfName' class='errorclass'></div>
</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "mName" name = "mName" class ='ep' type = "textbox" placeholder="Middle Name"></input>
</td>
</tr>
<tr >
<td>
<div id='errormName' class='errorclass'></div>
</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "lName" name = "lName" class ='ep' type = "textbox" placeholder="Family Name"></input>
</td>
</tr>
<tr >
<td>
<div id='errorlName' class='errorclass'></div>
</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "email" name = "email" class ='ep' type = "email" placeholder="Email:"></input>
</td>
</tr>
<tr >
<td>
<div id='erroremail' class='errorclass'></div>
</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "cEmail" name = "cEmail" class ='ep' type = "email" placeholder="Retype Email:"></input>
</td>
</tr>
<tr >
<td>
<div id='errorcEmail' class='errorclass'></div>
</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "passwd" name = "passwd" class ='ep' type = "password" placeholder="Password:"></input>
</td>
</tr>
<tr >
<td>
<div id='errorpasswd' class='errorclass'></div>
</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "rPasswd" name = "rPasswd" class ='ep' type = "password" placeholder="Retype Password:"></input>
</td>
</tr>
<tr >
<td>
<div id='errorrPasswd' class='errorclass'></div>
</td>
</tr>
<tr>
<td >
<br>
<input id = "login" name = "login" class ='loginButton' type = "submit" value="Submit"></input>
</td>
</tr>
</table>
</form>
</div>
</div>
<script src="javascripts/jquery/jquery-1.9.1.js"></script>
<script src="javascripts/jquery/jquery.validate.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#signupForm").validate({
rules: {
fName: {
required: true,
accept: "[a-zA-Z]+"
},
mName: {
required: false,
accept: "[a-zA-Z]+"
},
lName: {
required: true,
accept: "[a-zA-Z]+"
},
email: {
required: true,
email: true
},
cEmail: {
required: true,
email: true,
equalTo: '#email'
},
passwd: {
required: true,
minlength: 8
},
rPasswd: {
required: true,
minlength: 8,
equalTo: '#passwd'
}
},
messages: {
fName: "Please enter valid name.",
mName: "Please enter valid name.",
lName: "Please enter valid name.",
email: "Please enter valid email.",
cEmail: {
email: "Please enter valid email.",
equalTo: "It doesn't match with email."
},
passwd: {
required: "Please enter your password",
minlength: "Minlength has to be 8"
},
rPasswd: {
required: "Please enter your password",
minlength: "Minlength has to be 8",
equalTo: "Doesn't match with password field."
}
},
errorPlacement: function ($error, $element) {
var name = $element.attr("name");
$("#error" + name).append($error);
},
submitHandler: function (form) {
alert('valid form submit');
}
});
})
</script>
</body>
但即使规则失败，它也会提交表格。
另一方面，下面类似的登录表格按预期工作
<form id = 'loginForm' name ='loginForm' method='post' action = "/loginUser">
<table class='bttable'>
<tr>
<td class='btheight btalign fb'><a href="/auth/facebook" class='socialLink'>Sign in with Facebook</a></td>
</tr>
<tr >
<td class='btheight btalign tw'><a href="/auth/twitter">Login with Twitter</a></td>
</tr>
<tr>
<td class='btheight btalign go'><a href="/auth/google">Login with Google</a></td>
</tr>
<tr>
<td class='line'>–––––––––––– OR ––––––––––––</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "email" name = "email" class ='ep' type='email' placeholder="Your Email" required></input>
</td>
</tr>
<tr >
<td>
<div id='erroremail' class='errorclass'></div>
</td>
</tr>
<tr >
<td class='btheight btalign tw'>
<input id = "passwd" name = "passwd" class ='ep' type = "password" placeholder="Your Password" required></input>
</td>
</tr>
<tr >
<td>
<div id='errorpasswd' class='errorclass'></div>
</td>
</tr>
<tr >
<td >
<br>
<input id = "login" name='login' class ='loginButton' type = "submit" value="Submit"></input>
</td>
</tr>
</table>
</form>
</div>
</div>
<script src="javascripts/jquery/jquery-1.9.1.js"></script>
<script src="javascripts/jquery/jquery.validate.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#loginForm").validate({
rules: {
email: {
required: true,
email: true
},
passwd: {
required: true,
minlength: 8
}
},
messages: {
email: "Please enter a valid email address.",
passwd: {
required: "Please enter your password",
minlength: "Minlength has to be 8"
}
},
errorPlacement: function ($error, $element) {
var name = $element.attr("name");
$("#error" + name).append($error);
},
submitHandler: function (form) {
alert('valid form submit');
}
});
})
</script>
还有任何规则建议吗？
由于
答案 0 :(得分：1)
您的HTML标记......
<input id = "fName" name = "fName" class ='ep' type = "textbox" placeholder="Given Name"></input>
1）应该是type="text"，而不是textbox。 AFAIK，没有type="textbox"这样的东西。
2）input元素是“自我关闭”的，而不是容器，并且没有关闭输入标记（</input>）。
无效：<input></input>
有效：<input />
有效：<input>
提示：所有这些额外的空格都是不一致的，不必要的，通常不是你编写HTML标记的方式。与引号类型（单引号或双引号）保持一致也很好。
清理：
<input id="fName" name="fName" class="ep" type="text" placeholder="Given Name" />
在rules选项中...
fName: { // <- this is a type="text" input
required: true,
accept: "[a-zA-Z]+" // <- accept is only for type="file" inputs
},
...
1）The accept method 仅用于为使用<input type="file" />元素上传的文件设置MIME类型，而不是text输入的正则表达式。
2）如果您想使用正则表达式，那么您需要使用pattern方法，并且还必须包含the additional-methods.js file。
fName: {
required: true,
pattern: "[a-zA-Z]+"
},
...
DEMO：http://jsfiddle.net/fE3DG/
修改：
OP从未询问过正则表达式，并且只表示验证是在提交表单时没有显示任何错误，所以这就是这个问题的答案。根据以下评论，假设OP只想匹配上限和下限。小写字母，将正则表达式模式更改为此...
pattern: "^[A-z]+$"
更新了DEMO：http://jsfiddle.net/fE3DG/1/
答案 1 :(得分：-1)
您需要插件中的additional-methods.min.js