我已经用小提琴来展示我试图为我的用户 ID 字段执行的简单验证:
- 使其成为必需(尽可能积极地验证)
- 设置最小长度(尽可能积极地验证)
- 设置最大长度(尽可能积极地验证)
- 运行 AJAX 调用以确保用户 ID 不存在(我只想在模糊时运行它)
我没有使用 validate() - 远程规则,因为我想返回一个自定义对象,而不仅仅是一个简单的字符串。如果远程可以的话and它只调用模糊规则,那么我可以尝试一下。 (我的所有 AJAX 响应都遵循一组对象定义。)
HTML
<form action="#" method="get" id="register-wizard">User ID:
<br />
<input type="text" class="form-control required confirm-me" id="User_UserId" name="User.UserId" autocomplete="off" />
<div class="loader user-id hide" style="display: none;"><i class="icon-spinner icon-spin icon-large"></i> (Checking...)</div>
<p>
<button id="next">Next</button>
</p>
</form>
JavaScript
var $wizardForm = $("#register-wizard");
var $validator = $wizardForm.validate({
rules: {
"User.UserId": {
required: true,
minlength: 3,
maxlength: 125,
userIdCheck: true
}
}
});
$("#next").click(function (e) {
e.preventDefault();
//do validations before moving onto the next tab in the wizard
var $valid = $wizardForm.valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
});
jQuery.validator.addMethod("userIdCheck", function (value, element) {
var validator = this;
this.startRequest(element);
var $loader = $(".loader.user-id");
$.ajax({
url: "/echo/json/",
type: "POST",
data:{
json: JSON.stringify({
text: 'some text'
}),
delay: 1
},
success: function (result) {
console.log("result: ")
console.log(result);
validator.stopRequest(element, true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("A server error occurred.\n\n" + textStatus);
},
beforeSend: function () {
$loader.show();
},
complete: function () {
$loader.hide();
}
});
return "pending";
}, "The user ID is already in use");
这是我的小提琴:http://jsfiddle.net/eHu35/3/ http://jsfiddle.net/eHu35/3/