注册时的表单验证

用户名验证

1. 首先用户名要大于6位小于12位
2. 然后给用户名表单加一个离开焦点的事件
3. 如果输入有错 就下显示提示信息

js代码

//验证名户名是符合法
var elementById = document.getElementById("username");
     elementById.onblur=function (){
        //trim() 去除字符串两端的空格 value是得到表单的内容
        var username = document.getElementById("username").value.trim();
//用户名在6到12位之间
        if ( username.length >=6&& username.length <=12) {
            //校验用户名合格 style.display = "none";隐藏起来
            document.getElementById("username_err").style.display = "none";
            return true;
        } else {
            //显示错误信息
            document.getElementById("username_err").style.display = '';
            return false;
        }
    }

密码验证

    //验证密码是否符合要求
    var elementById = document.getElementById("password");
    elementById.onblur=function (){
        //trim() 去除字符串两端的空格
        var password = document.getElementById("password").value.trim();
//密码大于三位
        if ( password.length >=3) {
            //校验密码合格
            document.getElementById("password_err").style.display = "none";
            return true;
        } else {
            //显示错误信息
            document.getElementById("password_err").style.display = '';
            return false;
        }
    }

手机号验证

 //验证手机号是否符合要求
    var elementById = document.getElementById("tel");
    elementById.onblur=function (){
        //trim() 去除字符串两端的空格
        var tel = document.getElementById("tel").value.trim();
//手机号码是11位
        if ( tel.length ==11) {
            //校验手机号合格
            document.getElementById("tel_err").style.display = "none";
            return true;
        } else {
            //显示错误信息
            document.getElementById("tel_err").style.display = '';
            return false;
        }
    }

 最后表单全部合格后才能提交

    //提交表单
    var elementById = document.getElementById("reg_btn");
        elementById.onclick = function () {
          return   checkUsername()&& checkPassword()&& checkTel();
        }