Javascript - 实现简单的注册名不能为空

目录

实现功能

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

代码

!!!markup
<!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版

!!!markup
<!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>

文章最后编辑时间为:2015-11-09 17:31:47

标签: javascript

声明:本博客如无特殊说明皆为原创,转载请注明来源:Javascript - 实现简单的注册名不能为空谢谢!

相关文章

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png