Js检验form表单数据

最新推荐文章于 2022-07-19 18:15:42 发布

茶屋Teahouse

最新推荐文章于 2022-07-19 18:15:42 发布

阅读量874

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaWeb学习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_42875470/article/details/88066661

JavaWeb学习专栏收录该内容

5 篇文章

订阅专栏

使用js检验form表单内数据，适用于大多数，比较基本。

js代码

        //封装方法，只能在差不多的input标签里使用
        function check(input) {
            //获取元素对应的span标签
            var span = document.getElementById(input.id + "Span");
            if(input.value == "" || input.value == null){
                span.style.color = "red";
                span.innerHTML = "*" + input.name +"不能为空";

                //方便后面的检验
                return false;
            }else if((input.id == "desc" && input.value.length>=50) || (input.id!="desc" && input.value.length <= 10)){
                span.style.color = "green";
                span.innerHTML = input.name + "没毛病";

                return true;
            }else{
                if(input.id == "desc"){
                    span.style.color = "red";
                    span.innerHTML = input.name + "请再写多一点";

                    return false;
                }
                span.style.color = "red";
                span.innerHTML = input.name + "超出限制";

                return false;
            }
        }

        //复选框全选和取消全选
        function allCheckbox() {
            //获得checkbox列表
            var boxs = document.getElementsByName("fav");
            //获得按钮的对象
            var all = document.getElementById("all");
            if(all.checked){ //点击的时候变为true，所以让复选框先在true里执行
                for (var i = 0; i < boxs.length; i++) {
                    boxs[i].checked = true;
                }
                //让全选和其他复选框一起改变
                all.checked = true;
            }else {
                for(var j=0;j<boxs.length;j++){
                    boxs[j].checked=false;
                }
                all.checked = false;
            }
        }
        
        function agreeReg() {
            var reg = document.getElementById("reg");
            var reg2 = document.getElementsByName("reg");
            if(reg.checked){
                reg2[0].disabled = !reg2[0].disabled;
            }else{
                reg2[0].disabled = !reg2[0].disabled;
            }
        }

        function resultCheck(btn) {
            //检验每个input标签是否都被检验完成
            if(check(document.getElementById("uname")) || check(document.getElementById("pwd")) || check(document.getElementById("desc"))){
            }else{
                alert("请认真填写信息");
            }
        }

Html代码

<form action="#" method="get">
    用户名：<input type="text" id="uname" name="用户名" onblur="check(this)" placeholder="*用户名不能大于10位"><span id="unameSpan"></span><br><br>
    密码：<input type="password" id="pwd" name="密码" onblur="check(this)" placeholder="*用户名不能大于10位"><span id="pwdSpan"></span><br><br>
    性别：<input type="radio" name="sex" value="1" checked="checked">男<input type="radio" name="sex" value="0">女<br><br>
    爱好：<input type="checkbox" name="fav" value="1">LOL<input type="checkbox" name="fav" value="2">吃饭<input type="checkbox" name="fav" value="3">睡觉<input type="checkbox" name="fav" value="4">听歌<br>
    <input type="checkbox" name="fav" value="5">跑步<input type="checkbox" name="fav" value="6">宅在家里<input type="checkbox" name="fav" value="7">看电影<input type="checkbox" name="fav" value="8">交朋友
    &nbsp;&nbsp;<input type="checkbox" id="all" onclick="allCheckbox()">全选<br><br>
    自我介绍：<br><textarea name="自我介绍" style="resize: none;" id="desc" cols="45" rows="10" onblur="check(this)"></textarea><br><span id="descSpan"></span><br><br>
    <input type="checkbox" id="reg" onclick="agreeReg()">是否同意注册 <br><br>
    <input type="submit" name="reg" disabled="disabled" value="注册" onclick="resultCheck(this)">
</form>