jQuery小试之用户名校验

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

前台界面：

HTML代码：

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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是必须的。

CSS代码：

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

.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("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + 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");

        }
    });
});

$(document).ready(function() {
//DOM装载完成后运行
        //获取文本框
var userNameNode = $("#userName");
//注册button单击事件
$("#verifyButton").click(function() {
  //1.获取文本框的内容
  var userName = userNameNode.val();
  //2.将这个内容发送给服务器端
  if (userName == "") {
   alert("你什么都木有输入，提交什么？");
  } else {
   $.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
     //3.接收服务器端返回的数据，填充到div中
     $("#result&

补充：web前端 , JavaScript ,