我尝试使用spring mvc：P验证表单以添加新用户。我已经通过Spring自定义验证器进行了服务器端验证。但客户端验证允许提交表单。这就是我这样做的方式：
包括javascript文件：
<script src="resources/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="resources/js/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="resources/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="resources/js/additional-methods.min.js" type="text/javascript"></script>
Spring之前的表单将其发送到浏览器：
<c:url value="/AddUser" var="action"/>
<form:form method="post" action="${action}" commandName="user" id="adduserform">
<tr>
<td><form:label path="username"><spring:message code="user.form.username"/></form:label></td>
<td><form:input path="username" maxlength="15"/></td>
<td><form:errors path="username"/>${duplicated}</td>
</tr>
<tr>
<td><form:label path="password"><spring:message code="user.form.password"/></form:label></td>
<td><form:password path="password" maxlength="20"/></td>
<td><form:errors path="password"/>${policyMessage}</td>
</tr>
<tr>
<td><form:label path="confirmPassword"><spring:message
code="user.form.password2"/></form:label></td>
<td><form:password path="confirmPassword" maxlength="20"/></td>
</tr>
<tr>
<td><form:label path="description"><spring:message
code="user.form.description"/></form:label></td>
<td><form:input path="description"/></td>
<td><form:errors path="description"/></td>
</tr>
<tr>
<td><form:label path="role"><spring:message code="user.form.roles"/></form:label></td>
<td><form:select path="role" items="${rolesList}"/></td>
</tr>
<tr>
<td><form:label path="blocked"><spring:message code="user.form.blocked"/></form:label></td>
<td><form:checkbox path="blocked" value="false"/></td>
</tr>
<tr>
<td><form:label path="changePasswordAtLogon"><spring:message
code="user.form.changePasswordAtLogon"/></form:label></td>
<td><form:checkbox path="changePasswordAtLogon" value="false"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" value="<spring:message
code="user.form.submit"/>"/>
</td>
</tr>
</form:form>
</table>
</form>
浏览器中的表单：
<form id="adduserform" action="/AddUser" method="post">
<tr>
<td><label for="username">Username</label></td>
<td><input id="username" name="username" type="text" value="" maxlength="15"/></td>
<td></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input id="password" name="password" type="password" value="" maxlength="20"/></td>
<td></td>
</tr>
<tr>
<td><label for="confirmPassword">Confirm Password</label></td>
<td><input id="confirmPassword" name="confirmPassword" type="password" value="" maxlength="20"/></td>
</tr>
<tr>
<td><label for="description">Description</label></td>
<td><input id="description" name="description" type="text" value=""/></td>
<td></td>
</tr>
<tr>
<td><label for="role">User type</label></td>
<td><select id="role" name="role"><option value="ROLE_ADMIN">Administrator</option><option value="ROLE_USER">Normal User</option></select></td>
</tr>
<tr>
<td><label for="blocked">Blocked</label></td>
<td><input id="blocked1" name="blocked" type="checkbox" value="true"/><input type="hidden" name="_blocked" value="on"/></td>
</tr>
<tr>
<td><label for="changePasswordAtLogon">Change password at logon</label></td>
<td><input id="changePasswordAtLogon1" name="changePasswordAtLogon" type="checkbox" value="true"/><input type="hidden" name="_changePasswordAtLogon" value="on"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" value="Submit"/>
</td>
</tr>
</form>
表单下方的验证设置。我只是测试所以只有第一个字段的验证：
$(document).ready(function () {
$("#adduserform").validate(
{
rules: {
username: {
required: true
}
},
messages: {
username: {
required: "F** working"
}
}
});
});
答案 0 :(得分：0)
应该有效。确保包含jquery.validate.min.js的正确路径。
见jsfiddle。使用jquery 1.8.3进行测试。有关具体示例，您可以参考here。
$(document).ready(function () {
$("#adduserform").validate(
{
rules: {
username: "required"
},
messages: {
username: "Please enter username!"
}
});
});
答案 1 :(得分：0)
您的HTML无效，因此，form无效。
<form id="adduserform" action="/AddUser" method="post">
<tr>
....
您不能将<form>标记作为<tr>元素的父级。只有<table>，<thead>，<tbody>或<tfoot>元素可以是<tr>元素的父级。
请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
注意：这个错误的标记可能不是你的根问题，因为你的确切代码在我的jsFiddle中正常工作。但是，我只在一个浏览器中对此进行了测试，在您修复无效的HTML之前，您的搜索结果可能与浏览器不兼容。