新葡亰496net 新葡亰编程 jQuery小试之用户名校验

jQuery小试之用户名校验

在登录框中,为了让用户不点击鼠标,可以直接输入用户名和密码,我们常常在网页打开时设置焦点在用户名那个文本框。

我们想要达到的目的是:当文本框内容为空时,出现红色边框和红色波浪下划线提示;且内容为空时提交,提示“你什么都木有输入,提交什么?”;输入内容则红色框消失,下部出现提交内容。
图片 1

如果你以前还没接触过ajax的话,建议先看看有关ajax的书籍。我提供个地址:

但是,大多数设置属于“霸王设置”,有时由于网速原因,我们已经输入完了用户名,开始输入密码了,程序才将焦点移动到用户名文本框,这种设置反而影响了我们的操作。

        前台界面:

众所周知,ajax概括起来就是异步传输,而在此过程中就离不开XMLHttpRequest对象的使用。

我们可以对程序作些改进,如果用户还没有输入用户名,就移动焦点,如果用户已经输入了用户名,就不移动焦点。

        HTML代码:

例子:假设我们要做一个注册用户验证该用户名是否存在的功能。

一、head 区加入如下代码:
<script type=”text/javascript” language=”javascript”>
<!–
var autoFocus = true; //是否自动设置焦点

[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“; 
<html> 
    <head> 
        <title>用户名校验</title> 
        <meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″> 
        <link type=”text/css” rel=”stylesheet”
href=”css/userVerify.css” /> 
        <script type=”text/javascript”
src=”js/jquery.js”></script> 
        <script type=”text/javascript”
src=”js/userVerify.js”></script> 
    </head> 
    <body> 
        请输入用户名: 
        <input type=”text” id=”userName” class=”userText”/>
<input type=”button” value=”提交” id=”verifyButton” /> 
        <div id=”result”></div> 
    </body> 
</html> 

表单代码:在账户文本框失去焦点后,我们验证用户名是否存在。我们定义一个<span
id=”info”></span>来显示提示信息。

function SetFocus()
{
    if (!autoFocus)
    {
        return;
    }
    
    document.getElementById(“loginForm”).userName.focus(); //假设 form
的 id 为 loginForm,用户名文本框的 name 为 userName
}
–>
</script>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“;
<html>
 <head>
  <title>用户名校验</title>
  <meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
  <link type=”text/css” rel=”stylesheet” href=”css/userVerify.css”
/>
  <script type=”text/javascript”
src=”js/jquery.js”></script>
  <script type=”text/javascript”
src=”js/userVerify.js”></script>
 </head>
 <body>
  请输入用户名:
  <input type=”text” id=”userName” class=”userText”/> <input
type=”button” value=”提交” id=”verifyButton” />
  <div id=”result”></div>
 </body>
</html>        此处引用一下jQuery.js是必须的。

xhtml代码

二、body 语句设置事件: <body onLoad=”javascript:SetFocus();”>

        CSS代码:

  1. <form name=”regFrom” action=”” method=”POST”> 
  2. 账户:<input type=”text” name=”userName” id=”userName” onblur=”checkUserName()” /><span id=”info”></span><br /> 
  3. 密码:<input type=”password” name=”usePwd” id=”userPwd” /><br /> 
  4. 再次输入密码:<input type=”password” name=”usePwd” id=”userPwd” /><br /> 
  5. <input type=”submit” name=”submit” value=”提交” /> <input type=”reset” name=”reset” value=”重置” /> 
  6. </form> 

三、用户名文本框设置事件: <input type=”text”
name=”userName” size=”14″ onfocus=”javascript:autoFocus=false;”>

[html]
.userText { 
    /*控制文本框的边框是红色的实线*/ 
    border: 1px solid red; 
        /*添加文本框下面的红色下划线*/ 
    background-image: url(../images/userVerify.gif); 
        /*横向重复*/ 
    background-repeat: repeat-x; 
        /*出现在底部*/ 
    background-position: bottom; 

XMLHttpRequest对象的创建: 

.userText {
 /*控制文本框的边框是红色的实线*/
 border: 1px solid red;
        /*添加文本框下面的红色下划线*/
 background-image: url(../images/userVerify.gif);
        /*横向重复*/
 background-repeat: repeat-x;
        /*出现在底部*/
 background-position: bottom;
}        javascript代码:[html] view
plaincopyprint?$(document).ready(function() { 
    //DOM装载完成后运行 
        //获取文本框 
    var userNameNode = $(“#userName”);   
    //注册button单击事件 
    $(“#verifyButton”).click(function() { 
        //1.获取文本框的内容 
        var userName = userNameNode.val(); 
        //2.将这个内容发送给服务器端 
        if (userName == “”) { 
            alert(“<SPAN style=”FONT-SIZE:
18px”>你什么都木有输入,提交什么?</SPAN>”); 
        } else { 
            $.get(“” +
encodeURI(encodeURI(userName)),null,function(response){ 
                    //3.接收服务器端返回的数据,填充到div中  
                    $(“#result”).html(response); 
                });      
             
        } 
    }); 
    //需要找到文本框,注册事件 
    userNameNode.keyup(function(){ 
        //获取当前文本框中的内容 
        var value = userNameNode.val(); 
        if (value == “”) { 
            //让边框变成红色,并且带背景图 
            userNameNode.addClass(“userText”); 
        } else { 
            //去掉边框和背景图 
            userNameNode.removeClass(“userText”); 
             
        } 
    }); 
}); 

 

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图