JQuery实现用户名无刷新验证的小例子


Posted in Javascript onMarch 22, 2013

1.在静态页面里添加文本框及样式和js脚本的引用:

Code highlighting produced by Actipro CodeHighlighter (freeware)https://3water.com/-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>无标题页</title>
    <script  language ="javascript" src ="../jquery-1.3.2.min.js" type ="text/javascript" ></script>
    <script language ="javascript" src ="validator.js" type ="text/javascript" ></script>
    <link type ="text/css" rel="stylesheet" href ="validator.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        用户名:<input id="txtName" type="text" class ="txtName" />
        <div  id ="result"></div>
    </div>
    </form>
</body>
</html>

2.css样式表,当文本框文字为空时边框红色:

.txtName
{
 border:1px red solid;    
}

3.js脚本:当文本框文字为空时边框红色;如果用户名为janes,则提示“用户名已经存在”,否则提示“用户名可以使用”。

Code highlighting produced by Actipro CodeHighlighter (freeware)https://3water.com/-->$(function(){
var txtname=$("#txtName");
//输入文字时文本框样式
txtname.keyup(function(){
var name=$(this).val();
if(name=="")
    $(this).addClass("txtName");
    else $(this).removeClass("txtName");
})
//失去焦点时验证用户名是否可用
$("#txtName").blur(function()
{
  var name=$(this).val();
  $.get("validator1.aspx?name="+name,null,function(response){
  $("#result").html(response);
  })
})
})

4..aspx及.cs页面代码,用来验证用户名是否可用,以返回结果。

Code highlighting produced by Actipro CodeHighlighter (freeware)https://3water.com/-->public partial class Validator_validator1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
            string name = Request.QueryString["name"].ToString();
            if (name == "janes")
                Response.Write("该用户名已经存在!");
            else
                Response.Write("该用户名可以使用!");
    }
}
Javascript 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
jquery文字上下滚动的实现方法
Mar 22 #Javascript
JS模块与命名空间的介绍
Mar 22 #Javascript
JS在textarea光标处插入文本的小例子
Mar 22 #Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 #Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 #Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 #Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 #Javascript
You might like
php学习之function的用法
2012/07/14 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php备份数据库类分享
2015/04/14 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
js数组操作常用方法
2014/05/08 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python 的 Socket 编程
2015/03/24 Python
python 接收处理外带的参数方法
2018/12/03 Python
python 带时区的日期格式化操作
2020/10/23 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
工作个人的自我评价
2014/01/14 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
员工年终考核评语
2014/12/31 职场文书
公司给客户的感谢信
2015/01/23 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书