注册时的表单验证

用户名验证

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

js代码

//验证名户名是符合法
var elementById = document.getElementById("username");
     elementById.onblur=checkUsername;

         function checkUsername(){
        //trim() 去除字符串两端的空格
        var username = document.getElementById("username").value.trim();
        //用户名在6到12位之间
        // var reg = /^[a-zA-Z0-9]{6,12}$/;
             var flag = username.length >=6&& username.length <= 12;
        if (flag ) {
            //校验用户名合格 style.display = "none";隐藏起来
            document.getElementById("username_err").style.display = "none";
        } else {
            //显示错误信息
            document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

密码验证

//验证密码是否符合要求
    var elementById = document.getElementById("password");
    elementById.onblur=checkPassword;

        function checkPassword(){
        //trim() 去除字符串两端的空格
        var password = document.getElementById("password").value.trim();
//密码大于三位

            var flag = password.length >=3;
        if ( flag) {
            //校验密码合格
            document.getElementById("password_err").style.display = "none";
        } else {
            //显示错误信息
            document.getElementById("password_err").style.display = '';
        }

        return flag;
    }

手机号验证

    //验证手机号是否符合要求
    var elementById = document.getElementById("tel");
    elementById.onblur=checkTel;

        function checkTel (){
        //trim() 去除字符串两端的空格
        var tel = document.getElementById("tel").value.trim();
//手机号码是11位
//         var reg = /^1[3-9]\d{9}$/;
            var flag = tel.length == 11;
        if ( flag) {
            //校验手机号合格
            document.getElementById("tel_err").style.display = "none";
        } else {
            //显示错误信息
            document.getElementById("tel_err").style.display = '';
        }

        return  flag;
    }

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

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