利用jQuery.validate异步验证用户名是否存在

简介:

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();}”,这样是获取不到值的。



本文转自linzheng 51CTO博客,原文链接:http://blog.51cto.com/linzheng/1081741

相关文章
|
9天前
|
前端开发 Java 数据安全/隐私保护
jQuery-ajax-用户名异步请求
jQuery-ajax-用户名异步请求
14 0
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
57 0
|
JSON JavaScript 前端开发
jQuery 密码验证和深入理解JSONP【前端jQuery框架】
jQuery 密码验证和深入理解JSONP【前端jQuery框架】
jQuery 密码验证和深入理解JSONP【前端jQuery框架】
|
JavaScript 前端开发 数据安全/隐私保护
jQuery之validate验证表单
访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 validate.
2023 0
|
JavaScript
jquery validate验证方法
实例:         equalTo方法  equalTo(其他)返回:布尔 说明:要求元素与另一个元素相同 等于(其他) 其他 类型:选择器 元素的选择器用于比较当前值 例子: 使“字段”必须与#other相同 1 2 3 4 五 6 7 8...
1180 0
|
JavaScript 前端开发 数据安全/隐私保护
|
JavaScript 前端开发 数据安全/隐私保护
jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: 还需要引入三个外部js库 //这是中文简体语言包 validatebox表单验证实例 1 $(function () { 2 $("#name").
1390 0

热门文章

最新文章

相关课程

更多