js正则表达式登录验证，并添加表单

1.当每个输入框失去焦点后就做校验

2.只有所有正则表达式都通过验证才可以提交表单

话不多说 上图

<form action=ke; onsubmit="return (trueName()+truePwd()+trueConfirmPwd()+trueEmail()+truePhone()+trueEID()+trueAddress())==7">
  <table align="center" border="1" style="border-collapse: collapse;">
    <tr>
      <td>用户名:</td>
      <td><input type="text" id="name" onblur="trueName()" />
        <span id="nameResult">大写字母开头 6-20位字符(不允许有符号但是允许有_)</span></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="text" id="pwd" onblur="truePwd()" />
        <span id="pwdResult">大写开头 数字字母符号混合 8-15位</span></td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td><input type="text" id="confirmPwd" onblur="trueConfirmPwd()" />
        <span id="confirmPwdResult">大写开头 数字字母符号混合
							8-15位</span></td>
    </tr>
    <tr>
      <td>邮箱:</td>
      <td><input type="text" id="email" onblur="trueEmail()" />
        <span id="emailResult">邮箱格式</span></td>
    </tr>
    <tr>
      <td>手机号:</td>
      <td><input type="text" id="phone" onblur="truePhone()" />
        <span id="phoneResult">手机号格式</span></td>
    </tr>
    <tr>
      <td>身份证号:</td>
      <td><input type="text" id="eID" onblur="trueEID()" />
        <span id="eIDResult">身份证号格式</span></td>
    </tr>
    <tr>
      <td>地址:</td>
      <td><input type="text" id="address" onblur="trueAddress()" />
        <span id="addressResult">中文开头 数字 - 字母 中文混合</span></td>
    </tr>
    <tr>
      <td colspan="2" align="center" height="36px"><input type="submit" style="width: 8rem;height: 2rem;" value="提交" /></td>
    </tr>
  </table>
</form>
<script>
    function trueName() {
        //用户名校验
        var trueName = document.getElementById("name").value;
        var span = document.getElementById("nameResult");
        var name = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/;
        if (!name.test(trueName)) {
            span.getElementById("nameResult").innerHTML="DUI";
            span.style.color = "red";
            return false;
        } else {

            span.style.color = "green";
            return true;
        }
    }


    function truePwd() {
        //密码
        var truePwd = document.getElementById("pwd").value;
        var span = document.getElementById("pwdResult");
        var pwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
        if (!pwd.test(truePwd)) {

            span.style.color = "red";
            return false;
        } else {
            span.style.color = "green";
            return true;
        }
    }

    function trueConfirmPwd() {
        //确认密码
        var trueConfirmPwd = document.getElementById("confirmPwd").value;
        var span = document.getElementById("confirmPwdResult");
        var confirmPwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
        if (!confirmPwd.test(trueConfirmPwd)) {
            span.style.color = "red";
            return false;
        } else {
            span.style.color = "green";
            return true;
        }
    }

    function trueEmail() {
        //邮箱
        var trueEmail = document.getElementById("email").value;
        var span = document.getElementById("emailResult");
        var email = /^[A-z0-9]+@[a-z0-9]+.com$/;
        if (!email.test(trueEmail)) {
            span.style.color = "red";
            return false;
        } else {
            span.style.color = "green";
            return true;
        }
    }

    function truePhone() {
        //手机号
        var truePhone = document.getElementById("phone").value;
        var span = document.getElementById("phoneResult");
        var phone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
        if (!phone.test(truePhone)) {
            span.style.color = "red";
            return false;
        } else {
            span.style.color = "green";
            return true;
        }
    }

    function trueEID() {
        //身份证号
        var trueEID = document.getElementById("eID").value;
        var span = document.getElementById("eIDResult");
        var eID = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!eID.test(trueEID)) {
            span.style.color = "red";
            return false;
        } else {
            span.style.color = "green";
            return true;
        }
    }

    function trueAddress() {
        //地址
        var trueAddress = document.getElementById("address").value;
        var span = document.getElementById("addressResult");
        var address = /^[\u4E00-\u9FA50-9A-Za-z\u4E00-\u9FA5]+$/;
        if (!address.test(trueAddress)) {
            span.style.color = "red";
            return false;
        } else {
            span.style.color = "green";
            return true;
        }
    }
    function ke() {

    }
</script>
</body>
</html>

前面我们加了判断 若都正确即可以正常跳转至其他网页