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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
python 异或加密字符串的实例
2018/10/14 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
如何清空python的变量
2020/07/05 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
留学自荐信写作方法
2014/01/27 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
永远是春天观后感
2015/06/12 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
JavaScript函数柯里化
2021/11/07 Javascript