零. 写在前面

作者目前是软件技术专业的大二在校生，小萌新一枚。由于最近要做一个小项目，要实现登录/注册验证的功能，所以就在网上学（sou）习（gua）了一些相关技术，做了一个简单的注册验证功能，写下来分享给大家。

javascript如何注册onclick 使用js制作注册界面_错误提示

一. 有哪些技术可以做表单验证?

要做表单验证，可以用js，也可以用jQuery，还可以用SpringMVC。 jQuery是JavaScript的高级版，我认为，作为菜鸟，还是先把基本的知识掌握，再使用jQuery这样的高集成的脚本语言。JavaScript和jQuery的关系：jQuery 就对JavaScript的一个扩展，封装，就是让JavaScript更好用，更简单。jQuery就是要用更少的代码，漂亮的完成更多的功能。 二. 注册界面实现

2.1 效果图：

虽然说界面不是本篇文章的重点，但是，总要有个像样的界面吧？话不多说，上图：

javascript如何注册onclick 使用js制作注册界面_界面_02

前端使用BootStrap3.3.7框架，简洁易上手，代码如下：

2.2 在 < head >标签中引入样式表：

<head>
<meta charset="utf-8">
<title>RegisterDemo</title>
<meta name="Description" content="js注册验证" >
<meta name="author" content="Daixiang">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css">
</head>

2.3 在 < body >标签中写出界面：

<div class="container">
  <!-- 注册页面 -->
  <div class="well col-md-4">
    <form method="post" id="form">
      <h3>新用户注册</h3>
      <div class="alert alert-warning alert-dismissible" role="alert">
        <span id="tips">欢迎注册新用户！</span>
      </div>
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <input type="text" id="name" class="form-control" placeholder="用户名">
      </div>
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <input type="password" id="password" class="form-control" placeholder="密码">
      </div>
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-ok-sign"></i></span>
        <input type="password" id="repassword" class="form-control" placeholder="再次输入密码">
      </div>
      <p>
        <input type="submit" id="submit" class="btn btn-primary btn-block" onClick="return check()" value="注册新用户"/>
      </p>
    </form>
  </div>
</div>

2.4 js文件引入

建议在< body >标签中，< /body >前引入js文件。

<!-- jquery.min.js样式引入时要放在bootstrap.min.js之前，否则有些功能无法实现 -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

由于这段代码比较简单，就不解释了，如果你对BootStrap这个前端框架还不了解的话，可以参考BootStrap的官方网站。

三. js表单验证实现

3.1 定义提示框显示内容

var x = "请输入用户名、密码进行注册！";
    function tips() {
        document.getElementById("tips").innerHTML = x;
    }

3.2 对输入框样式进行控制

//判断obj是否有此class
    function hasClass(obj,cls){
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    //为obj添加class
    function addClass(obj,cls){
        if(!this.hasClass(obj,cls)){
            obj.className += " " + cls;
        }
    }
    //移除obj所对应的class
    function removeClass(obj,cls){
        if(hasClass(obj,cls)){
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg," ");
        }
    }

3.3 对用户名进行验证

//对name进行验证
    function checkName(name){
        if(name!=""){
            removeClass(ele.name,"borderRed");
            x = "请输入6-12位密码！";
            document.getElementById("tips").style.display = "inherit";
            return true;
        }else{
            addClass(ele.name,"borderRed");
            x = "对不起，用户名为空！";
            document.getElementById("tips").style.display = "inherit"; 
            //显示错误提示。
            return false;
        }
    }

3.4 对密码进行验证

//对password和repassword进行验证
    function checkPassword(password,repassword){
        if(password == ""){
            addClass(ele.password,"borderRed");
            x = "对不起，密码为空！";
            document.getElementById("tips").style.display = "inherit"; 
            //显示错误提示。
            return false;
        }
        else if(password != "" &&  password.length < 6 ){
            addClass(ele.password,"borderRed");
            x = "对不起，密码少于6位！";
//显示错误提示。
            return false;
        }
        else if(password != "" &&  password.length > 12 ){
            addClass(ele.password,"borderRed");
            x = "对不起，密码大于12位！";
            document.getElementById("tips").style.display = "inherit"; 
            //显示错误提示。
            return false;
        }
        else if(repassword == ""){
            addClass(ele.repassword,"borderRed");
            x = "对不起，重复密码为空！";
//显示错误提示。
            return false;
        }
        else if(password != repassword && repassword != "" && password != ""){
            addClass(ele.password,"borderRed");
            addClass(ele.repassword,"borderRed");
            x = "两次输入的密码不一致！";
            document.getElementById("tips").style.display = "inherit"; 
            //显示错误提示。
            return false;
        }else{
            removeClass(ele.repassword,"borderRed");
            x = "注册信息提交中……";
            document.getElementById("tips").style.display = "inherit";
            return true;
        }
    }

3.5 失焦时进行验证

//存放各个input字段的obj
    var ele = {
        name: document.getElementById("name"),
        password: document.getElementById("password"),
        repassword: document.getElementById("repassword")
    };
    //当name失去焦点时检测
    ele.name.onblur = function(){
        checkName(ele.name.value);
    }
    //当password失去焦点时检测
    ele.password.onblur = function(){
        checkPassword(ele.password.value,ele.repassword.value);
    }
    //当repassword失去焦点时检测
    ele.repassword.onblur = function(){
        checkPassword(ele.password.value,ele.repassword.value);
    }

3.6 提交时进行验证

//提交表单时进行check()验证
    function check(){
        var nameok = false;
        var passwordok = false;

        if(checkName(ele.name.value)){
            nameok = true;
        }
        if(checkPassword(ele.password.value,ele.repassword.value)){
            passwordok = true;
        }
        if(nameok && passwordok){
            alert("恭喜，注册成功！");  
        }
        return false;
    }