【发布时间】：2011-07-01 20:41:52
【问题描述】：
正如您在下面的完整代码中所见，我正在尝试使用 jQuery 的验证插件对更改我的密码表单（出现在 jQuery-UI 对话框中）进行一些非常简单的验证。
表单有3个输入框：
- 现有密码（必填）
- 新密码（必填，5-20 个字符）
- 确认新密码（必填，与新密码相同）
这应该非常简单，但我看到验证器允许用户仅输入现有密码并跳过其他字段。我应该怎么做？谢谢！
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://localhost:8080/css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:8080/js/jquery-1.4.3.min.js" type="text/javascript" ></script>
<script src="http://localhost:8080/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://localhost:8080/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
</head>
<body>
<style>
.error{
color:red;
font-size:8pt;
}
.valid{
color:green;
}
</style>
<form id="usersForm" action="profile/save" method="POST">
<a href="#" id="changePasswordLink">Change my password</a>
</form>
<div id="dialog-changePassword" title="Update My Password">
<form id="changePasswordForm">
<table>
<tr>
<td style="font-weight:bold;text-align:right;padding-right:1em;">
<span>Current Password: </span>
</td>
<td>
<input type="password" class="currentPassword" id="currentPassword" />
</td>
</tr>
<tr>
<td style="font-weight:bold;text-align:right;padding-right:1em;">
<span>New Password: </span>
</td>
<td>
<input type="password" class="newPassword" id="newPassword" />
</td>
</tr>
<tr>
<td style="font-weight:bold;text-align:right;padding-right:1em;">
<span>Confirm New Password: </span>
</td>
<td>
<input type="password" class="confirmPassword" id="confirmPassword" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$( "#changePasswordLink" ).click(function(){
$('#changePasswordForm').validate({
success: function(label) {
label.addClass("valid").html("OK!");
}});
jQuery.validator.addClassRules({
currentPassword: {
required: true
},
newPassword: {
required: true,
minlength: 5,
maxlength: 20
},
confirmPassword: {
equalTo: "#newPassword"
}
});
//alert(JSON.stringify($("#currentPassword").rules()));
// alert(JSON.stringify($("#newPassword").rules()));
// alert(JSON.stringify($("#confirmPassword").rules()));
$( "#dialog-changePassword" ).dialog('open');
});
$( "#dialog-changePassword" ).dialog({
modal: true
,autoOpen:false
,resizable:false
,width:600
,buttons: {
"Update My Password": function() {
// $("#changePasswordForm input").each(function(){
// var me=$(this);
// alert(JSON.stringify(me.rules()));
// });
var errorCount=$('#changePasswordForm').validate().numberOfInvalids();
//$('#changePasswordForm').valid()
if(!errorCount && $('#changePasswordForm').valid()){
$(this).dialog("close");
var userId='1';
var currentPassword=$('#currentPassword').val();
var newPassword=$('#newPassword').val();
var confirmPassword=$('#confirmPassword').val();
alert('ajax would submit the info now');
}else{
alert("There are still "+errorCount+" errors.")
}
}
,"Cancel": function() { $(this).dialog("close"); }
}
});
});//end docReady
</script>
【问题讨论】：
-
等等，验证器只验证一个字段，或者有什么东西阻止你在某些字段中输入数据（即你只能输入一个）？
-
用户可以在三个字段中的任何一个/所有字段中输入信息。验证仅适用于第一遍的第一个字段。在第二次验证时，它似乎至少知道其他字段之一。
标签： jquery jquery-plugins validation