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

来源：互联网发布：vscode 小程序插件编辑：程序博客网时间：2024/06/05 11:12
【校验标准】
名字：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>
希望能帮助刚学表单校验的朋友一点提示，有不懂的地方接着问
阅读全文
0 0