jQuery的表单验证

最新推荐文章于 2024-01-26 10:05:23 发布

qq_45486059

最新推荐文章于 2024-01-26 10:05:23 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/qq_45486059/article/details/107044772

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="    crossorigin="anonymous" >
    </script>
    <style type="text/css">
        .error{
            color: red;
            font-size: 15px;
            font-family: "楷体";
        }

        .succes{
            color: green;
            font-size: 15px;
            font-family: "楷体";
        }


    </style>

</head>
<body>
<form action="#" method="post">
    <p>
        <span>姓名：</span><input type="text" class="must" name="username" id="username">

    </p>

    <p>
        <span>密码：</span><input type="text" class="must" name="pwd" id="pwd">

    </p>
    <input type="submit" id="send"/>
</form>


<script>
    var user =$("#username");
    var pwd =$("#pwd");

    var userc=false;
    var pwdc=false;
    user.blur(function () {
        var parent=$(this).parent();
        parent.find(".msg").remove();
        if(user.val()==""){

            errorMsg=" 姓名非空，长度6位以上，不包含特殊字符！";
            parent.append("<span class='msg error'>"+errorMsg+"</span>");
        }else{
            var okMsg="输入正确";
            parent.append("<span class='msg succes'>"+okMsg+"</span>")
            userc=true;
        }
    });

    pwd.blur(function () {
        var parent=$(this).parent();
        parent.find(".msg").remove();//移除掉第一次的信息，不然会一直堆积
        if(pwd.val()==""){
            errorMsg=" 密码非空，长度6位以上，不包含特殊字符！";
            parent.append("<span class='msg error'>"+errorMsg+"</span>");
        }else{
            var okMsg="输入正确";
            parent.append("<span class='msg succes'>"+okMsg+"</span>")
            pwdc=true;
        }
    });

    $("#send").click(function () {
        $("form :input").trigger("blur");//启动表单里所有的触发事件

        if(userc && pwdc){
            alert("注册成功");

        }else{

            return false;
        }



    })


</script>
</body>
</html>

qq_45486059

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的表单验证

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
复制链接

扫一扫