html中的表单验证

最新推荐文章于 2024-03-01 20:16:14 发布

hzHZKJ

最新推荐文章于 2024-03-01 20:16:14 发布

阅读量1.3k

点赞数 3

分类专栏：菜鸟入门文章标签： html

本文链接：https://blog.csdn.net/hzHZKJ/article/details/111825487

版权

菜鸟入门专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML中的表单验证

表单验证
完成的验证功能：
1.用户名必须填写
2.密码长度8-16之间
3.邮箱地址，手机号必须符合正确格式
4.必须同意（勾选复选框）才能提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            border: 1px solid rgba(0,0,0,0.2);
            width: 400px;
            height: 350px;
            margin: 0 auto;
        }
        input{
            outline: none;
        }
    </style>
</head>
<body>
    <div class="main" id="main">
        <form action="a.html">
            Username:<input type="text" name="username" placeholder="请输入用户名" onblur="checkusename(this)"><br>
            <span id="username"></span><br>
            Password:<input type="text" name="pwd" placeholder="请输入密码" onblur="checkpwd(this)"><br>
            <span id="pwd"></span><br>
            Email:<input type="text" name="email" placeholder="请输入邮箱" onblur="checkemail(this)"><br>
            <span id="email"></span><br>
            Phone:<input type="text" name="phone" placeholder="请输入手机号" onblur="checkphone(this)"><br>
            <span id="phone"></span><br>
            Company:<input type="text" name="company" placeholder="请输入公司名(选填)"><br>
            <span id="company"></span><br>
            Adrres:<input type="text" name="adrres" placeholder="请输入地址（选填）"><br>
            <span id="adrres"></span><br>
            <input type="checkbox" name="agree" onclick="checkagree(this)">
            <span class="agree">I agree to the <a href="#">terms & conditions</a></span><br>
            <span id="agree"></span>
            <input type="button" id="submitBtn" value="register">
        </form>
    </div>

    <script>
        var t = 0;
        function checkusename(input) {
            let uname = input.value;
            console.log(uname)
            if(uname == null || uname == ""){
                $id('username').innerHTML = "用户名未输入";
                $id('username').style.color = '#f00';
            }else {
                $id('username').innerHTML = "";
                t ++;
            }
        }
        function checkpwd(input) {
            var mPattern = /\d{8,10}/;
            let pwd = input.value;
            if (pwd == null || pwd == ""){
                $id('pwd').innerHTML = "密码未输入";
                $id('pwd').style.color = '#f00';
            }else if(!mPattern.test(pwd)){
                $id('pwd').innerHTML = "密码长度不在8-16之间";
                $id('pwd').style.color = '#f00';
            }else {
                $id('pwd').innerHTML = "输入成功";
                $id('pwd').style.color = '#43FF5D';
                t ++;
            }
        }
        function checkemail(input) {
            var ePattern = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
            let email = input.value;
            if (email == null || email == ""){
                $id('email').innerHTML = "邮箱未输入";
                $id('email').style.color = '#f00';
            }else if(!ePattern.test(email)){
                $id('email').innerHTML = "邮箱不正确";
                $id('email').style.color = '#f00';
            }else {
                $id('email').innerHTML = "输入成功";
                $id('email').style.color = '#43FF5D';
                t++;
            }
        }
        function checkphone(input) {
            var pPattern = /^1\d{10}$/;
            let phone = input.value;
            if (phone == null || phone == ""){
                $id('phone').innerHTML = "手机号未输入";
                $id('phone').style.color = '#f00';
            } else if(!pPattern.test(phone)){
                $id('phone').innerHTML = "手机号不正确";
                $id('phone').style.color = '#f00';
            }else {
                $id('phone').innerHTML = "输入成功";
                $id('phone').style.color = '#43FF5D';
                t++;
            }
        }
        $id('submitBtn').addEventListener('click',function () {
            var f = document.forms[0];
            if(document.querySelectorAll("input[name=agree]:checked").length == 0){
                $id('agree').innerHTML="请同意";
                $id('agree').style.color = '#f00';
                return;
            }else{
                $id('agree').innerHTML="";
            }
            if(t == 4){
                f.submit();
            }
        })
        function $id(id) {
            return document.getElementById(id);
        }
    </script>
</body>
</html>