我们经常在网上注册的时候,当输入错误的用户名的时候,右边会自动出现相应的警告信息,那么今天我们就介绍一下如何使用
jquery
实现上述功能!我们先看上面的截图
第一:注册页面代码
<%@
page language=
"java"
contentType=
"text/html; charset=GBK"
%>
<!
DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
link
href=
"css/style.css"
rel=
"stylesheet"
type=
"text/css"
/>
<
script
type=
"text/javascript"
src=
"jslib/jquery.js"
></
script
>
<
script
type=
"text/javascript"
src=
"jslib/function.js"
></
script
>
<
title
>
测试用户名表单输入
</
title
>
</
head
>
<
body
>
<
input
type=
"hidden"
name=
"tmp"
id=
"tmp"
value=
""
/>
<
table
>
<!--
用户名的处理
Start-->
<
tr
>
<
td
>
用户名:
<
input
type=
"text"
id=
"username"
></
td
>
<
td
><
input
type=
"button"
value=
"检测"
onclick=
"verify()"
></
td
>
<
td
>
<!--
正常提示
Start-->
<!-- class
属性用于连接
css
-->
<
div
id=
"div_uname_rule"
class=
"name-pop"
>
18
个字符,包括字母、数字、下划线
<
br
>
字母开头,字母和数字结尾,不区分大小写
<
br
>
</
div
>
<!--
正常提示
End-->
<!--
错误提示
Start-->
<
div
id=
"div_uname_err_info"
class=
"name-pop"
></
div
>
<!--
错误提示
End-->
</
td
>
</
tr
>
<!--
用户名的处理
End-->
<
tr
>
<
td
>
密码
:
<
input
type=
"text"
id=
"password"
></
td
>
</
tr
>
</
table
>
</
body
>
第二:css代码(如果大家想设计的漂亮一些,需要在此多下些功夫,我只简单的设计了一个)
div.name-pop{
background-color:#EDEDEB;
position:absolute;
height:auto;
left:310px;
top:14px;
width:320px;
border: 1px red solid;
display:none;
padding-left:5px;
padding-top:5px;
padding-bottom: 5px;
padding-right: 5px
}
background-color:#EDEDEB;
position:absolute;
height:auto;
left:310px;
top:14px;
width:320px;
border: 1px red solid;
display:none;
padding-left:5px;
padding-top:5px;
padding-bottom: 5px;
padding-right: 5px
}
第三:
function.js代码
function chkUsername() {
var username = $.trim($("#username").val());
if(username=="") {
return 0;
}
else if( /^\d.*$/.test( username ) ){
//用户名不能以数字开头
return -1;
}
else if(username.length<6 || username.length>18 ){
//合法长度为6-18个字符
return -2;
}
else if(! /^\w+$/.test( username ) ){
//用户名只能包含_,英文字母,数字
return -3;
}
else if(! /^([a-z]|[A-Z])[0-9a-zA-Z_]+$/.test( username ) ){
//用户名只能英文字母开头
return -4;
}
else if(!(/[0-9a-zA-Z]+$/.test( username ))){
//用户名只能英文字母或数字结尾
return -5;
}
return 1;
}
$(document).ready(function(){
/** ----------- 用户名输入框事件 ----------- */
//当文本框成为焦点时
$("#username").bind("focus", function(){
var ret=chkUsername();
if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").hide();
$("#div_uname_rule").show();
}
return false;
});
//当文本框失去焦点时
$("#username").bind("blur", function(){
var username = $.trim($("#username").val());
if(username=="") {
return 0;
}
else if( /^\d.*$/.test( username ) ){
//用户名不能以数字开头
return -1;
}
else if(username.length<6 || username.length>18 ){
//合法长度为6-18个字符
return -2;
}
else if(! /^\w+$/.test( username ) ){
//用户名只能包含_,英文字母,数字
return -3;
}
else if(! /^([a-z]|[A-Z])[0-9a-zA-Z_]+$/.test( username ) ){
//用户名只能英文字母开头
return -4;
}
else if(!(/[0-9a-zA-Z]+$/.test( username ))){
//用户名只能英文字母或数字结尾
return -5;
}
return 1;
}
$(document).ready(function(){
/** ----------- 用户名输入框事件 ----------- */
//当文本框成为焦点时
$("#username").bind("focus", function(){
var ret=chkUsername();
if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").hide();
$("#div_uname_rule").show();
}
return false;
});
//当文本框失去焦点时
$("#username").bind("blur", function(){
var ret=chkUsername();
$("#div_uname_rule").hide();
$("#div_uname_err_info").show();
if (ret>0){
var url="testServlet?name="+$("#username").val();
$.get(url,null,callback);
}
else if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").html("用户名不能为空");
}
else {
if(ret == -1){
//显示具体的错误内容
$("#div_uname_err_info").html("用户名不能以数字开头");
}
else if(ret == -2){
$("#div_uname_rule").hide();
$("#div_uname_err_info").show();
if (ret>0){
var url="testServlet?name="+$("#username").val();
$.get(url,null,callback);
}
else if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").html("用户名不能为空");
}
else {
if(ret == -1){
//显示具体的错误内容
$("#div_uname_err_info").html("用户名不能以数字开头");
}
else if(ret == -2){
$("#div_uname_err_info").html("合法长度为6-18个字符");
}
else if(ret == -3){
$("#div_uname_err_info").html("用户名只能包含_,英文字母,数字 ");
}
else if(ret == -4){
$("#div_uname_err_info").html("用户名只能英文字母开头");
}
else if(ret == -5){
$("#div_uname_err_info").html("用户名只能英文字母或数字结尾");
}
}
}
else if(ret == -3){
$("#div_uname_err_info").html("用户名只能包含_,英文字母,数字 ");
}
else if(ret == -4){
$("#div_uname_err_info").html("用户名只能英文字母开头");
}
else if(ret == -5){
$("#div_uname_err_info").html("用户名只能英文字母或数字结尾");
}
}
return false;
});
});
function verify(){
var ret=chkUsername();
if (ret>0){
var url="testServlet?name="+$("#username").val();
$.get(url,null,callback); //将文本框 中的数据发送到页面上
}
}
//接收服务器返回的数值,将服务器返回的数据动态的显示在页面上
function callback(data){
var resultObj=$("#div_uname_err_info");
resultObj.html(data);
}