利用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 dialog里的服务器控件 事件失效问题
Dec 08 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
JavaScript中的闭包
Feb 24 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php session安全问题分析
2011/06/24 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php curl基本操作详解
2013/07/23 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python函数中不定长参数的写法
2019/02/13 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
乡镇党建工作汇报材料
2014/08/14 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
交心谈心活动总结
2015/05/11 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
革命电影观后感
2015/06/18 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python