利用js编写一个简单的html表单验证，验证通过时提交数据(附源码)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script type="text/javascript">

        function checknm() {

            var check = false;

            var username = document.getElementsByName("username")[0];

            if (1<=username.value.length && username.value.length<=10){

                console.log(document.getElementById("checktext1").innerHTML = " √")

                check = true;

            }else{

              

                document.getElementById("checktext1").innerHTML = " × 最多10位且不为空";

                check = false;

            }

            return check;

        }

       

        function checkide(){

            var check = false;

            var userid = document.getElementsByName("userid")[0];

            if (1<=userid.value.length && userid.value.length<=10){

                document.getElementById("checktext2").innerHTML = " √";

                check = true;

               

            }else{

                document.getElementById("checktext2").innerHTML = " × 最多10位且不为空";

                check = false;

            }

            return check;

        }

        function checkpwd(){

            var check = false;

            var userpwd = document.getElementsByName("userpwd")[0];

            if (6<userpwd.value.length && userpwd.value.length<=15){

                document.getElementById("checktext3").innerHTML = " √";

                check = true;

               

            }else{

                document.getElementById("checktext3").innerHTML = " × 最少6位，最多15位";

                check = false;

            }

            return check;

        }

        function checkpwd1(){

            var check = false;

            var userpwd1 = document.getElementsByName("userpwd1")[0];

            var userpwd = document.getElementsByName("userpwd")[0];

            if (userpwd1.value == userpwd.value){

                document.getElementById("checktext4").innerHTML = " √密码一致";

                check = true;

           

               

            }else{

                document.getElementById("checktext4").innerHTML = " × 两次密码不一致";

                check = false;

            }

            return check;

        }

        function checkeml(){

            var check = false;

            var useremail = document.getElementsByName("useremail")[0];

            if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(useremail.value)){

                document.getElementById("checktext5").innerHTML = " × 邮箱格式不规范";

                check = false;

               

            }else{          

                document.getElementById("checktext5").innerHTML = " √";

                check = true;

            }

            return check;

        }

        function check(){

            var check = checknm() && checkide() && checkpwd() && checkpwd1() && checkeml();

            return check;

  

        }

    </script>

</head>

<body>

    <!-- <a href="./login.html"></a> -->

    <!-- <button onclick="yz()" >验证账号</button> -->

    <form method="get" action="./success.html" onsubmit = "return check()">

        <table align="center">

            <tr>

                <td><label>*</label><strong>用户名:</strong></td>

                <td><input type="text" name="username" value="" placeholder="用户名(5位以内)" onchange="checknm()"></td>

                <td><span id="checktext1"></span></td>

            </tr>

            <tr>

                <td><label>*</label><strong>用户ID:</strong></td>

                <td><input type="text" name="userid" value="" placeholder="数字ID(11位以内)" onchange="checkide()"></td>

                <td><span id="checktext2"></span></td>

            </tr>

            <tr>

                <td><label>*</label><strong>登录密码:</strong></td>

                <td><input type="password" name="userpwd" value="" placeholder="请输入密码(6~15)" onchange="checkpwd()"></td>

                <td><span id="checktext3"></span></td>

            </tr>

            <tr>

                <td><label>*</label><strong>确认密码:</strong></td>

                <td><input type="password" name="userpwd1" value="" placeholder="请再次确认密码" onchange="checkpwd1()"></td>

                <td><span id="checktext4"></span></td>

            </tr>

            <tr>

                <td><label>*</label><strong>电子邮箱:</strong></td>

                <td><input type="text" name="useremail" value="" placeholder="邮箱地址，如：123@qq.com" onchange="checkeml()"></td>

                <td><span id="checktext5"></span></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="submit" value="提交"></td>

                <td><a href="">重填</a></td>

            </td>

            </tr>

        </table>

    </form>

</body>

</html>