欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-02 10:30:28
<!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>

上一篇:

下一篇: