摘要:1.在静态页面里添加文本框及样式和js脚本的引用:. 代码如下: Code highlighting produced by Actipro CodeHighlighter (freeware)https://www.jb51.net/--> <html xmlns="https://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"> <p> 用户名:<input id="txtName" type="text" class ="txtName" /> <p id ="result"></p> </p> </form> </body> </html>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-JQuery实现用户名无刷新验证的小例子

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

. 代码如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)https://www.jb51.net/-->
<html xmlns="https://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">
<p>
用户名:<input id="txtName" type="text" class ="txtName" />
<p id ="result"></p>
</p>
</form>
</body>
</html>

 

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

. 代码如下:

.txtName
{
border:1px red solid;
}

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

. 代码如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)https://www.jb51.net/-->$(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://www.jb51.net/-->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("该用户名可以使用!");

}
}

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

. 代码如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)https://www.jb51.net/-->
<html xmlns="https://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">
<p>
用户名:<input id="txtName" type="text" class ="txtName" />
<p id ="result"></p>
</p>
</form>
</body>
</html>

 

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

. 代码如下:

.txtName
{
border:1px red solid;
}

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

. 代码如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)https://www.jb51.net/-->$(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://www.jb51.net/-->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技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-JQuery实现用户名无刷新验证的小例子

全部内容,希望文章能够帮你解决

js实例教程-JQuery实现用户名无刷新验证的小例子

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过