利用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 相关文章推荐
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
javascript中的new使用
Mar 20 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
解析微信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
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
javascript import css实例代码
2008/07/18 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
安全事故检讨书
2014/01/18 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript