利用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 相关文章推荐
正则表达式语法
Oct 09 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
超级强大的表单验证
2006/06/26 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
详解vuex的简单使用
2018/03/12 Javascript
JS实现li标签的删除
2019/04/12 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python读取中文txt文本的方法
2018/04/12 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
对Python w和w+权限的区别详解
2019/01/23 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
师德建设实施方案
2014/03/21 职场文书
国际贸易专业求职信
2014/06/04 职场文书
深入理解python多线程编程
2021/04/18 Python