利用jQuery.Validate异步验证用户名是否存在(推荐)


Posted in Javascript onDecember 09, 2016

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.Validate异步验证用户名是否存在,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
js使用心得分享
Jan 13 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 #Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 #Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 #Javascript
Angular.Js的自动化测试详解
Dec 09 #Javascript
浅析javascript中的Event事件
Dec 09 #Javascript
清除js缓存的多种方法总结
Dec 09 #Javascript
Vue.js计算属性computed与watch(5)
Dec 09 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
destoon官方标签大全
2014/06/20 PHP
php车辆违章查询数据示例
2016/10/14 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
语义化 H1 标签
2008/01/14 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
javascript常见用法总结
2014/05/22 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
深入理解Python变量与常量
2016/06/02 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python散点图实例之随机漫步
2018/08/27 Python
Python os模块常用方法和属性总结
2020/02/20 Python
python实现ftp文件传输功能
2020/03/20 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
Python Django路径配置实现过程解析
2020/11/05 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
软弱涣散基层党组织整改方案
2014/10/25 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python