js表单验证

HTML部分

<form action="reg" method="post" onsubmit="return commit()">
    用户名:<input type="text" id="userNameId" name="userName" onblur="checkUserName()"/><span id="userNameShow"></span><br/>
    密码:<input type="text" id="pwdId" name="pwd" onblur="checkPwd()"/><span id="pwdShow"></span><br/>
    确认密码:<input type="text" id="confirmPwdId" name="confirmPwd" onblur="checkConfirmPwd()"/><span id="confirmPwdShow"></span><br/>
    年龄:<input type="text" id="ageId" name="age" onblur="checkAge()"/><span id="ageShow"></span><br/>
    手机号:<input type="text" id="phoneId" name="phone" onblur="checkPhone()"/><span id="phoneShow"></span><br/>
    <input type="submit" value="注册"/>
</form>

js部分

我首先提取出了一个js方法，传入参数input的ID，验证信息，以及正则表达式

/**
 *  input框验证工具
 * @param id input框ID
 * @param show 显示验证信息
 * @param reg 正则表达式
 */

function check(id,show,reg){
    var value = document.getElementById(id).value;
    var show = document.getElementById(show);
    if(value == ""){
        show.innerText = "不能为空！";
        show.style.color = "red";
        return false;
    }else{
        if(reg.test(value)){
            show.innerText = "验证通过！";
            show.style.color = "green";
            return true;

        }else{
            show.innerText = "格式不正确！";
            show.style.color = "red";
            return false;
        }
    }
}

 //判断是否全部验证通过
    function commit(){
        if(checkUserName()&&checkPwd()&&checkAge()&&checkPhone()){
            return true;
        }else{
            return false;
        }
    }

    //验证用户名
    function checkUserName() {
        return check("userNameId", "userNameShow", /^[0-9a-zA-Z]{6,18}$/);
    }

    //验证密码
    function checkPwd() {
        return check('pwdId', 'pwdShow', /^[0-9a-zA-Z]{8,16}$/);
    }

    //验证确认密码
    function checkConfirmPwd() {
        var pwd = document.getElementById("pwdId").value;
        var confirmPwd = document.getElementById("confirmPwdId").value;
        var confirmPwdShow = document.getElementById("confirmPwdShow");
        if (checkPwd()) {
            if (pwd == confirmPwd) {
                confirmPwdShow.innerText = "验证通过！";
                confirmPwdShow.style.color = "green";
                return true;
            } else {
                confirmPwdShow.innerText = "两次输入的不同！";
                confirmPwdShow.style.color = "red";
                return false;
            }
        } else {
            confirmPwdShow.innerText = "不能为空！";
            confirmPwdShow.style.color = "red";
            return false;
        }

    }

    //验证年龄
    function checkAge() {
        return check('ageId', 'ageShow', /^[0-9]{1,3}$/);
    }

    //验证手机号
    function checkPhone() {
        return check('phoneId', 'phoneShow', /^1[0-9]{10}$/);
    }