开发者社区> 无声胜有声> 正文

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

简介: 转:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851781.html HTML头部引用: HTML内容(部分):   用户名:  JS代码部分: $(function() {//表单验证JS    $("#form1").
+关注继续查看

转:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851781.html

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery 密码验证和深入理解JSONP【前端jQuery框架】
jQuery 密码验证和深入理解JSONP【前端jQuery框架】
146 0
jQuery之validate验证表单
访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 validate.
1950 0
jquery validate验证方法
实例:         equalTo方法  equalTo(其他)返回:布尔 说明:要求元素与另一个元素相同 等于(其他) 其他 类型:选择器 元素的选择器用于比较当前值 例子: 使“字段”必须与#other相同 1 2 3 4 五 6 7 8...
1084 0
第83天:jQuery中操作form表单
操作form表单 1、 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr(“title”, “传智播客”); 获取属性: // 参数为:要获取的属性的名称,改操作会返回指定属性对应的值 $(selector).attr(“title”); 此时,返回指定属性的值 移除属性: // 参数为:要移除的属性的名称 $(selector).removeAttr(“title”); 注意:checked、selected、disabled要使用.prop()方法。
945 0
jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: 还需要引入三个外部js库 //这是中文简体语言包 validatebox表单验证实例 1 $(function () { 2 $("#name").
1302 0
+关注
无声胜有声
java,架构相关技术专家
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载