编程 Javascript

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("该用户名可以使用！");
    }
}

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js中字符替换函数String.replace()使用技巧

Aug 14 Javascript

关于js数组去重的问题小结

Jan 24 Javascript

jquery批量设置属性readonly和disabled的方法

Jan 24 Javascript

JS生成随机字符串的多种方法

Jun 10 Javascript

浅析JQuery中的html(),text(),val()区别

Sep 01 Javascript

jQuery同步提交示例代码

Dec 12 Javascript

javascript实现的网站访问量统计代码

Dec 20 Javascript

jQuery实现侧浮窗与中浮窗切换效果的方法

Sep 05 Javascript

防止重复发送 Ajax 请求

Feb 15 Javascript

vue-resource:jsonp请求百度搜索的接口示例

Nov 09 Javascript

深入理解webpack process.env.NODE_ENV配置

Feb 23 Javascript

vue组件中传值EventBus的使用及注意事项说明

Nov 16 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