经过上百次的试验试和搜索,终于把jquery.validate的各种功能用法了解清楚,网上关于jquery.validate的AJAX表单验证比较少,特别是对rules里面的remote提得比较简单,使得学习起来比较难,下面发布一下我个人的用法:
HTML头部引用:
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/messages_cn.js"></script>
HTML内容(部分):
<form name="form1" id="form1" method="post" action="">
<dl>
<dt>用户名:</dt>
<dd><input name="txtUserName" id="txtUserName" type="text" class="input1" /></dd>
</dl>
</form>
JS代码部分:
$(function() {
//表单验证JS
$("#form1").validate({
//出错时添加的标签
errorElement: "span",
rules: {
txtUserName: {
required: true,
minlength: 3,
maxlength: 16,
remote: {
type: "post",
url: "/tools/ValidateUserName.ashx",
data: {
username: function() {
return $("#txtUserName").val();
}
},
dataType: "html",
dataFilter: function(data, type) {
if (data == "true")
return true;
else
return false;
}
}
}
},
success: function(label) {
//正确时的样式
label.text(" ").addClass("success");
},
messages: {
txtUserName: {
required: "请输入用户名,3-16个字符(字母、数字、下划线),注册后不能更改",
minlength: "用户名长度不能小于3个字符",
maxlength: "用户名长度不能大于16个字符",
remote: "用户名不可用"
}
}
});
});
应注意的地方:
data: {
username: function() {
return $("#txtUserName").val();
}
有返回值,如果直接写“data: {username: $("#txtUserName").val();}”,这样是获取不到值的。
相关推荐
异步验证是通过AJAX(Asynchronous JavaScript and XML)技术实现的,具体是利用jQuery.Validate插件中的remote规则来完成。 在开始之前,需要在HTML头部引入必要的jQuery库文件。首先,是jQuery本身,其次,是...
除了基本的验证规则,jQuery.validate.js还支持自定义规则、异步验证(如检查用户名是否已存在)、分组验证等高级功能。例如,你可以创建一个自定义规则来验证密码强度: ```javascript $.validator.addMethod(...
除了基本的验证功能,jQuery.validate还提供了许多高级特性,如远程验证(`remote`)和异步验证。例如,可以使用`remote`规则来检查用户名是否已被注册: ```javascript username: { required: true, remote: ...
1. **异步验证**:利用AJAX实现对数据的后台验证,如邮箱的唯一性检查。 2. **动态验证**:根据其他字段的值改变验证规则,提供更灵活的验证体验。 3. **显示和隐藏错误提示**:使用`.error()`和`.success()`方法...
jQuery Validate插件还支持异步验证,例如验证用户名是否已存在,只需添加`remote`规则: ```javascript $("#myForm").validate({ rules: { username: { required: true, remote: "check-username.php" // 后端...
- 异步验证:`remote` 规则支持异步验证,这对于检查用户名是否可用或密码是否符合复杂性要求非常有用。 ### 五、使用示例 下面是一个简单的使用示例,展示了如何在表单上应用 `jQuery.validate.js` 进行验证: `...
此外,`remote`验证规则是jQuery Validate的一个亮点,它允许进行异步验证。例如,检查用户名是否已被注册,可以通过向服务器发送Ajax请求来实现: ```javascript username: { required: true, remote: "check_...
这个`uniqueUsername`方法通过发送异步请求到服务器来验证用户名是否可用,如果返回的结果不是"available",则表示用户名已被占用,验证失败。 总之,jQuery.validate插件通过简单易用的API,使得在网页开发中进行...
6. **用户名异步验证**:标签中提到了“异步验证用户名”,这通常涉及到服务器端的交互。可以使用`remote`规则进行异步验证。 ```javascript $('#username').rules('add', { required: true, remote: { url: ...
4. 阻止默认行为:通过设置submitHandler回调,可以阻止表单的默认提交行为,实现异步验证或自定义提交逻辑。 四、API详解 1. .validate(options):主方法,用于初始化验证插件,options是包含各种配置项的对象。 ...
3. **中文验证**:描述中提到的“含有中文验证”可能是指 `jQuery Validate` 插件支持对中文字符的验证,比如验证用户名或密码是否包含中文字符,或者验证中文输入是否符合特定要求。这通常是通过自定义验证规则实现...
这个库提供了丰富的功能,能够轻松地实现各种验证规则,包括基本的非空检查、长度限制、邮箱格式验证,甚至复杂的自定义规则和Ajax异步验证。 在使用jQuery Validate时,首先需要在HTML文档中引入jQuery库和jQuery ...
3. **异步验证**:支持通过AJAX进行后台验证,如检查用户名是否已存在。 4. **显示和隐藏错误**:自动管理错误消息的显示和隐藏,提高用户体验。 5. **自定义验证规则**:开发者可以通过扩展插件,定义自己的验证...
这里定义了一个名为`stringCheck`的自定义验证方法,用于验证用户名是否符合特定的格式要求。 #### 三、默认校验规则及提示 **1. 默认校验规则** - `required:true`: 必填字段。 - `remote:"check.php"`: 使用...
`jQuery Validate`还支持异步验证、自定义验证方法、分组验证等高级功能。这些可以用来创建更复杂的验证场景,比如验证密码强度、手机号码格式等。 在`second.html`文件中,我们可以期待看到一个实际的表单示例,它...
在某些情况下,如验证用户名是否已存在,我们可能需要进行异步请求。validate.js支持使用remote规则,将验证委托给服务器。 ```javascript $("#myForm").validate({ rules: { username: { required: true, ...
在实际项目中,我们可能会遇到异步验证的需求,比如检查用户名是否已存在。这时,可以使用jQuery Validate的远程验证功能。通过设置`remote`规则,并指定一个返回JSON格式结果的URL,插件会在用户提交表单时发送请求...
- **异步验证**:对于需要服务器端验证的情况,可以使用`remote`规则,通过AJAX请求来验证数据。 - **组验证**:使用`groups`选项,可以对一组相关的输入进行一次性验证。 - **显示和隐藏错误**:通过调整`...
除了基础的规则和消息配置外,jQuery.validate.js 还提供了许多高级功能,比如异步验证、自定义方法等。 ##### 异步验证 使用 `remote` 规则可以实现异步验证。这通常用于服务器端校验唯一性,例如用户名或邮箱...