利用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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
javascript中length属性的探索
Jul 31 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
vue自定义组件实现双向绑定
Jan 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
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python统计字符的个数代码实例
2020/02/07 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
事业单位请假制度
2014/01/13 职场文书
主管会计岗位职责
2014/03/13 职场文书
2014年党总支工作总结
2014/12/18 职场文书
刑事附带民事代理词
2015/05/25 职场文书
工资证明格式模板
2015/06/12 职场文书
婚宴父亲致辞
2015/07/27 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android