JQuery ajax实现用户名无刷新验证
时间:2016-03-22
在网站开发中,经常会要使用ajax技术实现用户名无刷新验证, 本文章向大家介绍JQuery ajax实现用户名无刷新验证,感兴趣的码农可以参考一下。
1.在静态页面里添加文本框及样式和js脚本的引用:
<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,则提示“用户名已经存在”,否则提示“用户名可以使用”。
$(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页面代码,用来验证用户名是否可用,以返回结果。
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("该用户名可以使用!");
}
}
- dependencies与devDependencies的区别
- [先行者课程] -- 用js实现倒计时功能的业务逻辑
- iOS如何实现多个环境一次打包
- 从原理到策略算法再到架构产品看推荐系统 | 附Spark实践案例
- MobX 在 React Native开发中的应用
- RCTEventEmitter使用
- Google V8 引擎
- 揭秘前端字符的戏精之路
- 跨语言嵌入模型的调查
- React Native如何消除启动时白屏
- 如何在Python中将TimeDistributed层用于Long Short-Term Memory Networks
- react native 调用原生UI组件
- Android侧滑删除另一种实现,SwipeListView补充
- React Native调用原生组件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在Python中创建命令行界面的最佳方式
- Diels-Alder反应的区域选择性分析
- 传说中的画图神器Plotnine,Python中的ggplot2
- 用ORCA做结构优化及轨迹查看
- 前端兼容之痛
- 离线安装PySCF程序(1.5及更高版本)
- Python Debug(调试)的终极指南
- Linux下做计算常用的别名alias推荐
- 离线安装支持Intel MKL的R-3.6
- Dalton使用——磷光及其相关过程
- 【赵渝强老师】Flink的Watermark机制(基于Flink 1.11.0实现)
- 在Windows CMD里“使用”常见Linux命令
- 什么是Python中的Dask,它如何帮助你进行数据分析?
- a[i] = i++ 到底对不对?
- 如何监视Python程序的内存使用情况