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 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
JS监听组合按键思路及实现过程
Apr 17 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
js string 转 int 注意的问题小结
2013/08/15 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python如何获取文件路径/目录
2020/09/22 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Python如何让字典保持有序排列
2022/04/29 Python