目录

实现功能

如果未输入用户名点击注册，会提示“用户名不能为空”并且输入框会变成红色，再次输入内容后，点击空白处，红色边框消失。

代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .kuang{border:1px #ff0000 solid;}
  </style>
  <script>
    window.onload = function(){
        var btn = document.getElementById("btnReg");
        var txt = document.getElementById("uid");
        btn.onclick = function(){

            if(txt.value.length<=0)
            {
                alert("会员名不能为空");
                txt.className="kuang";
                return false;
            }
        }

        txt.onblur = function(){
            if(txt.value.length<=0)
            {
                alert("会员名不能为空");
                this.className="kuang";
                return false;
            }else{
                this.className="";
            }
        }
    }
  </script>
 </head>
 <body>
  <form action="#" method="post">
    会员名：<input type="text" name="nickname" id="uid">
    <div><input type="submit" id="btnReg" value="注册"></div>
  </form>
 </body>
</html>

jQuery版

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .kuang{border:1px #ff0000 solid;}
  </style>
  <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
  <script>
    //ready声明页面加载完成之后执行程序
    $(document).ready(function(){
        //声明注册按钮的点击执行程序
        $("#btnReg").click(function(){
            if($("#uid").val()==""){
                alert("会员名不能为空!");
                //设置uid的class为kuang
                $("#uid").prop("className","kuang");
                return false;
            }
        });
    });
  </script>
 </head>
 <body>
  <form action="#" method="post">
    会员名：<input type="text" name="nickname" id="uid">
    <div><input type="submit" id="btnReg" value="注册"></div>
  </form>
 </body>
</html>