当前位置：首页 > news >正文

day16-示例：表单验证

news 来源：原创 2024/5/7 14:59:27

一、前言

　　之前我们学习了 jQuery事件之阻止事件的发生，这个用于表单验证，当我们的用户名，密码输入正确的时候，我们才能跳转，输入错误的时候，就阻止它跳转，那这个怎么实现呢？下面我们就来研究一下。

二、简单的表单验证

2.1、操作的html

<body>
    <form action="n5.html" method="POST">
        <input type="text"/>
        <input type="submit" value="提交"/>
    </form>

    <script src="jquery-1.12.4.js"></script>

    <script>
          //js代码
    </script>
</body>

2.2、表单验证

说明：当我点击提交按钮时，有数据的话，我就跳转，没有数据的话，就停留在当前页面上。

$(":submit").click(function(){
    //alert(123);
    var v = $(this).prev().val();
    if(v.length > 0 ){
        return true;  //不为空，则跳转
    }else {
        return false; //为空，不跳转
    }
})

三、复杂的表单验证

3.1、操作的html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <form id="f1" action="n5.html" method="POST">
        <div><input name="n1" type="text"/></div>
        <div><input name="n2" type="password"/></div>
        <div><input name="n3" type="text"/></div>
        <div><input name="n4" type="text"/></div>

        <input type="submit" value="提交"/>
    </form>

    <script src="jquery-1.12.4.js"></script>

    <script>
         //js代码
    </script>
</body>

3.2、for循环中return的作用

说明：在循环中加 return false，只是终止当前循环，而不是终止整个程序。

$(":submit").click(function(){
    var i = 1;
    $("#f1").find("input[type='text'],input[type='password']").each(function(){
        var v = $(this).val();
        console.log("第"+i+"次");
        if(v.length <= 0 ){
            i++;
            return false; //只是终止当前循环
        }
    });
    console.log(1111);
    return false;
})

效果图：

3.3、复杂表单验证

①去掉循环中的return代码

$(":submit").click(function(){
    $(".error").remove();
    var flag = true;
    $("#f1").find("input[type='text'],input[type='password']").each(function(){
        var v = $(this).val();
        //console.log(1);
        if(v.length <= 0 ){
            flag = false;
            var tag = document.createElement("span");
            tag.innerHTML = "必填";
            tag.className = "error";
            //$(tag).innerHTML("必填");
            $(this).after(tag);
            //return flag; //只是终止当前循环
        }
    });
    //console.log(1111);
    return flag;
})

效果图：

因为return终止的是当前循环，你注释掉，所以所有的输入框都验证。

②添加return false代码

$(":submit").click(function(){
    $(".error").remove();
    var flag = true;
    $("#f1").find("input[type='text'],input[type='password']").each(function(){
        var v = $(this).val();
        //console.log(1);
        if(v.length <= 0 ){
            flag = false;
            var tag = document.createElement("span");
            tag.innerHTML = "必填";
            tag.className = "error";
            //$(tag).innerHTML("必填");
            $(this).after(tag);
            return flag; //只是终止当前循环
        }
    });
    //console.log(1111);
    return flag;
})

效果图：