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






本文转自秋楓博客园博客,原文链接:http://www.cnblogs.com/rwxwsblog/p/5156214.html,如需转载请自行联系原作者
目录
相关文章
|
7天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
52 0
|
7天前
|
JavaScript 数据安全/隐私保护
jquery正则表达式验证手机号密码和姓名字段
jquery正则表达式验证手机号密码和姓名字段
|
6月前
|
JavaScript 新能源
jQuery验证车牌号(含新能源车牌)
jQuery验证车牌号(含新能源车牌)
28 1
|
6月前
|
JavaScript
jQuery鼠标离焦验证手机号码
jQuery鼠标离焦验证手机号码
15 0
|
6月前
|
JavaScript
jQuery验证身份证号码
jQuery验证身份证号码
27 0
|
11月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
53 0
|
JavaScript
改造jquery validator ,支持多个name相同的验证
改造jquery validator ,支持多个name相同的验证
120 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery探索正则表达时,金额验证、纯数字验证等
本篇文章将探索正则表达式的功能 在前端,输入金额时,需要对输入值进行验证,只能出现金额和小数点,或者有些值需要保留2位小数点时,那么通过正则表达式验证就非常的方便和高效
76 0
|
前端开发 JavaScript API
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
153 0
NET MVC第七章、jQuery插件验证
|
JavaScript 前端开发
将jquery validate校验框架的remote异步验证设置为同步校验
将jquery validate校验框架的remote异步验证设置为同步校验
282 0
将jquery validate校验框架的remote异步验证设置为同步校验