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

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

# 前端 2024-04-03 15:41 0 14 来源：数据天堂

<!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>               <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>