表单验证

这个是表单代码

<form action="" method="post" onsubmit="return checkButton()">
       用户名：<input type="text" name="userName" id="userName" onblur="checkUserName()"/><sapn id="userShow">不能为空且长度要在6-18之间</sapn><br>
        密码：<input type="text" name="passWord" id="passWord" onblur="checkPassWord()" /><span id="pwdShow">只能是数字和字母且长度要在8-16之间</span><br>
        确认密码：<input type="text"name="affirmWord" id="affirmWord" onblur="checkAffirmWord()"/><span id="affirmShow">和上面一样</span><br>
        性别：<input type="radio" name="sex" id="man"/><label for="man">男</label>
        <input type="radio" name="sex" id="nv"/><label for="nv">女</label><br>
        年龄：<input type="text" name="age" id="Age" onblur="checkAge()" /><sapn id="ageShow">只能是数字</sapn><br>
        手机号：<input type="text" id="cellPhone" onblur="checkCellPhone()" /><span id="cellphoneShow">以1开头且只能是数字</span><br>
        地址：<input type="text" name="address" id="address" onblur="checkAddress()"/><span id="addressShow">不能为空</span><br>
        <input type="button"value="提交" onblur="checkButton()"/>
</form>

这个是验证的代码

    <script>
        var a=0;
        function checkUserName(){
            var user = document.getElementById("userName")
            var userName = user.value;
            var userShow = document.getElementById("userShow")
            if(userName ==""||userName== undefined){
                userShow.innerText="不能为空"
                userShow.style.color="red"
                return false;
            }else{
                userShow.innerText="验证成功"
                userShow.style.color="green"
                return true;
            }
        }
        function checkPassWord(){
          var pass = document.getElementById("passWord")
          var passWord = a;
          var passWord = pass.value;
          var pwdShow = document.getElementById("pwdShow")
          if(passWord ==""||passWord==undefined){
              pwdShow.innerText="不能为空"
              pwdShow.style.color="red"
              return false;
          }else{
              pwdShow.innerText="验证成功"
              pwdShow.style.color="green"
              return true;
          }
        }
        function checkAffirmWord(){

            var affirm = document.getElementById("affirmWord")
            var affirmWord = affirm.value;
            var affirmShow = document.getElementById("affirmShow")
            if(affirmWord==""||affirmWord==undefined){
                affirmShow.innerText="不能为空"
                affirmShow.style.color="red"
                return false;
            }else {
                if(affirmWord!=a){
                    affirmShow.innerText="验证成功"
                    affirmShow.style.color="green"
                return false;
                }else{
                    affirmShow.innerText="验证失败"
                    affirmShow.style.color="red"
                return true;
                 }
            }
        }
        function checkAge(){
            var old = document.getElementById("Age")
            var Age= old.value;
            var ageShow = document.getElementById("ageShow")
            if(Age==""){
                ageShow.innerText="不能为空"
                ageShow.style.color="red"
                return false;
            }else {
                ageShow.innerText="验证成功"
                ageShow.style.color="green"
                return true;
              }
        }
        function checkCellPhone(){
            var cellPhone=document.getElementById("cellPhone").value;
            var cellPhoneShow= document.getElementById("cellphoneShow");
            var isPhoneNumber = /^[1]{1}[\d]{10}$/;
            if(cellPhone==""){
                cellPhoneShow.innerText="不能为空";
                cellPhoneShow.style.color="red";
                return false;
        }else{
                if(isPhoneNumber.test(cellPhone)){
                    cellPhoneShow.innerText="验证正确"
                    cellPhoneShow.style.color="green"
                    return true;
                }else {
                    cellPhoneShow.innerText = "验证错误"
                    cellPhoneShow.style.color = "red"
                    return false;
                }
            }



        }
        function checkAddress(){
            var add = document.getElementById("address")
            var address = add.value;
            var addressShow= document.getElementById("addressShow")
            if(address==""){
                addressShow.innerText="不能为空"
                addressShow.style.color="red"
                return false;
            }else{
                addressShow.innerText="验证成功"
                addressShow.style.color="green"
                return true;
            }
        }

    </script>

这个是全部的代码

<script>
        var a=0;
        function checkUserName(){
            var user = document.getElementById("userName")
            var userName = user.value;
            var userShow = document.getElementById("userShow")
            if(userName ==""||userName== undefined){
                userShow.innerText="不能为空"
                userShow.style.color="red"
                return false;
            }else{
                userShow.innerText="验证成功"
                userShow.style.color="green"
                return true;
            }
        }
        function checkPassWord(){
          var pass = document.getElementById("passWord")
          var passWord = a;
          var passWord = pass.value;
          var pwdShow = document.getElementById("pwdShow")
          if(passWord ==""||passWord==undefined){
              pwdShow.innerText="不能为空"
              pwdShow.style.color="red"
              return false;
          }else{
              pwdShow.innerText="验证成功"
              pwdShow.style.color="green"
              return true;
          }
        }
        function checkAffirmWord(){

            var affirm = document.getElementById("affirmWord")
            var affirmWord = affirm.value;
            var affirmShow = document.getElementById("affirmShow")
            if(affirmWord==""||affirmWord==undefined){
                affirmShow.innerText="不能为空"
                affirmShow.style.color="red"
                return false;
            }else {
                if(affirmWord!=a){
                    affirmShow.innerText="验证成功"
                    affirmShow.style.color="green"
                return false;
                }else{
                    affirmShow.innerText="验证失败"
                    affirmShow.style.color="red"
                return true;
                 }
            }
        }
        function checkAge(){
            var old = document.getElementById("Age")
            var Age= old.value;
            var ageShow = document.getElementById("ageShow")
            if(Age==""){
                ageShow.innerText="不能为空"
                ageShow.style.color="red"
                return false;
            }else {
                ageShow.innerText="验证成功"
                ageShow.style.color="green"
                return true;
              }
        }
        function checkCellPhone(){
            var cellPhone=document.getElementById("cellPhone").value;
            var cellPhoneShow= document.getElementById("cellphoneShow");
            var isPhoneNumber = /^[1]{1}[\d]{10}$/;
            if(cellPhone==""){
                cellPhoneShow.innerText="不能为空";
                cellPhoneShow.style.color="red";
                return false;
        }else{
                if(isPhoneNumber.test(cellPhone)){
                    cellPhoneShow.innerText="验证正确"
                    cellPhoneShow.style.color="green"
                    return true;
                }else {
                    cellPhoneShow.innerText = "验证错误"
                    cellPhoneShow.style.color = "red"
                    return false;
                }
            }



        }
        function checkAddress(){
            var add = document.getElementById("address")
            var address = add.value;
            var addressShow= document.getElementById("addressShow")
            if(address==""){
                addressShow.innerText="不能为空"
                addressShow.style.color="red"
                return false;
            }else{
                addressShow.innerText="验证成功"
                addressShow.style.color="green"
                return true;
            }
        }

    </script>
</head>
<body>
<form action="" method="post" onsubmit="return checkButton()">
       用户名：<input type="text" name="userName" id="userName" onblur="checkUserName()"/><sapn id="userShow">不能为空且长度要在6-18之间</sapn><br>
        密码：<input type="text" name="passWord" id="passWord" onblur="checkPassWord()" /><span id="pwdShow">只能是数字和字母且长度要在8-16之间</span><br>
        确认密码：<input type="text"name="affirmWord" id="affirmWord" onblur="checkAffirmWord()"/><span id="affirmShow">和上面一样</span><br>
        性别：<input type="radio" name="sex" id="man"/><label for="man">男</label>
        <input type="radio" name="sex" id="nv"/><label for="nv">女</label><br>
        年龄：<input type="text" name="age" id="Age" onblur="checkAge()" /><sapn id="ageShow">只能是数字</sapn><br>
        手机号：<input type="text" id="cellPhone" onblur="checkCellPhone()" /><span id="cellphoneShow">以1开头且只能是数字</span><br>
        地址：<input type="text" name="address" id="address" onblur="checkAddress()"/><span id="addressShow">不能为空</span><br>
        <input type="button"value="提交" onblur="checkButton()"/>
</form>
</body>

下面是效果图

代码尚未完善，只是演示！