简单实现部分HTML表单校验功能

最新推荐文章于 2024-07-09 17:01:34 发布

此生无悔入暴漫

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量1.1k

点赞数 1

分类专栏：前端白水文章标签：表单 html 标准

本文链接：https://blog.csdn.net/qq_32200417/article/details/77939084

版权

前端白水专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【校验标准】

名字：1-4位

密码：1-4位

确认密码

选择性别（必选）

选择爱好（选3以上）

简介（140字以内）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证表单</title>
    <style>
        td.ex{
            color: #959A9B
        }
    </style>
</head>
<body>
<center>
    <form action="http://qduyb.top" method="get" onsubmit="return checkAll()">
        <table>
            <caption>用户注册表</caption>
            <tr>
                <td>用户姓名：</td>
                <td><input type="text" onblur="checkName(this)" id="name"></td>
                <td><label id="name_msg"></label></td>
                <td class="ex">4~8位</td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password" onblur="checkPass(this)" id="pass"></td>
                <td><label id="pass_msg"></label></td>
                <td class="ex">4~8位</td>
            </tr>
            <tr>
                <td>重复密码：</td>
                <td><input type="password" onblur="recheckPass(this)" id="repass"></td>
                <td><label id="repass_msg"></label></td>
                <td class="ex">和密码一致</td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                <input type="radio" name="sex" value="0" onclick="checkSex()">男
                <input type="radio" name="sex" value="0" onclick="checkSex()">女
                </td>
                <td><label id="sex_msg"></label></td>
                <td class="ex">请勿为空</td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name="hobby" value="soccer" onclick="checkHobby()"/>足球
                    <input type="checkbox" name="hobby" value="game" onclick="checkHobby()"/>游戏
                    <input type="checkbox" name="hobby" value="travel" onclick="checkHobby()"/>旅行
                    <input type="checkbox" name="hobby" value="run" onclick="checkHobby()"/>跑步
                    <input type="checkbox" name="hobby" value="sleep" onclick="checkHobby()"/>睡觉
                </td>
                <td>
                    <label id="hobby_msg"></label>
                </td>
                <td class="ex">不能少于三个</td>
            </tr>
            <tr>
                <td>简介：</td>
                <td>
                    <textarea name="weibo" id="" cols="40" rows="5" onkeyup="check(this.value)" 
                    oncopy="return false" oncut="return false" onpaste="return false"></textarea></td>
                <td>
                    <div id="msg"></div>
                </td>
                <td class="ex">不能多于140个字</td>
            </tr>
            <tr>
                <td ><input type="submit" value="提交"></td>
                <td ><input type="reset" value="取消"></td>
                <td></td><td></td>
            </tr>
        </table>
    </form>
    </center>
    <script>
        var flagName = false
        var flagPass = false
        var flagRepass = false
        var flagSex = false
        var flagHobby = false
        var flagText = false

        function checkName(flag) {
            var dom_lb = document.getElementById('name_msg')
            if (flag.value.length<4||flag.value.length>8) {
                dom_lb.innerHTML="<font color='red'>用户姓名长度小四大八位</font>"
                flagName=false
                return
            }
            flagName=true
            dom_lb.innerHTML="<font color='green'>用户姓名符合要求</font>"
        }

        function checkPass(flag) {
            var dom_lb = document.getElementById('pass_msg')
            if (flag.value.length<4||flag.value.length>8) {
                dom_lb.innerHTML="<font color='red'>用户密码长度小四大八位</font>"
                flagPass=false
                return
            }
            flagPass=true
            dom_lb.innerHTML="<font color='green'>用户密码符合要求</font>"
        }

        function recheckPass() {
            var dom_lb = document.getElementById('repass_msg')
            var dom_llb = document.getElementById('sex_msg')
            var pass = document.getElementById('pass').value;
            var repass = document.getElementById('repass').value;
            if (pass != repass) {
                dom_lb.innerHTML="<font color='red'>两次密码不一致</font>"
                flagRepass=false
                return
            }
            flagRepass=true
            dom_lb.innerHTML="<font color='green'>两次密码一致</font>"
            dom_llb.innerHTML="<img src='image/wrong.png'><font color='red'>请选择性别</font>"
        }

        function checkSex() {
            var count = 0
            var dom_lb = document.getElementById('sex_msg')
            var dom_sex = document.getElementsByName("sex")
            for (var i = 0; i < dom_sex.length; i++) {
                if (dom_sex[i].checked) {
                    count++;
                }
            }
            if (count>0) {
                flagSex = true;
                dom_lb.innerHTML="<img src='image/right.png'>"
            }
        }

        function checkHobby() {
            var count = 0;
            var dom_hobby = document.getElementsByName("hobby")
            var dom_lb = document.getElementById("hobby_msg")
            for (var i = 0; i < dom_hobby.length; i++) {
                if(dom_hobby[i].checked){
                    count++
                }
                if (count<3) {
                    dom_lb.innerHTML="<font color='red'>爱好不能小于3个</font>"
                    flagHobby=false
                }
                else {
                    dom_lb.innerHTML="<font color='green'>爱好符合要求</font>"
                    flagHobby=true;
                }
            }
        }

        function check(value) {
            var dom_div = document.getElementById('msg')
            if (value.length<=140 && value.length>0) {
                dom_div.innerHTML="<font color='green'>您还可以输入"+(140-value.length)+"个字符</font>"
                flagText=true;
                return
            }
            dom_div.innerHTML="<font color='red'>您已经超过"+(value.length-140)+"个字符</font>"
            flagText=false;
        }

        function checkAll() {
            return flagName && flagPass && flagRepass && flagSex && flagHobby && flagText
        }
    </script>
</body>
</html>

希望能帮助刚学表单校验的朋友一点提示，有不懂的地方接着问

此生无悔入暴漫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
简单实现部分HTML表单校验功能

【校验标准】名字：1-4位密码：1-4位确认密码选择性别（必选）选择爱好（选3以上）简介（140字以内）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>验证表单</title> <style> td.ex{ color: #959A9B
复制链接

扫一扫

专栏目录