jQuery提交表单数据校验

MaGgIeOo0

于 2023-08-18 20:58:31 发布

阅读量243

点赞数 1

分类专栏： web前端基础文章标签： jquery 前端 javascript html

本文链接：https://blog.csdn.net/weixin_62971115/article/details/132369118

版权

web前端基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.0.js"></script>
    <script>
        $(function () {
            var username_flag = false;
            var password_flag = false;
            $("[name=username]").blur(function () {
                var usernameValue = $(this).val();
                //判空
                if (usernameValue == null || usernameValue == "") {
                    $("#span1").text("账号不能为空");
                } else {
                    //判长度
                    if (usernameValue.length < 8) {
                        $("#span1").text("账号不能少于8位");
                    } else {
                        //判内容
                        var rule = /^\d*$/;
                        if (rule.test(usernameValue)) {
                            $("#span1").text("账号不是纯数字");
                        } else {
                            $("#span1").text("√");
                            username_flag = true;
                        }
                    }
                }
            });

            $("[name=password]").blur(function () {
                var passwordValue = $(this).val();
                //判空
                if (passwordValue == null || passwordValue == "") {
                    $("#span2").text("账号不能为空");
                } else {
                    //判长度
                    if (passwordValue.length < 8) {
                        $("#span2").text("账号不能少于8位");
                    } else {
                        //判内容
                        var rule = /^\d*$/;
                        if (rule.test(passwordValue)) {
                            $("#span2").text("账号不是纯数字");
                        } else {
                            $("#span2").text("√");
                            password_flag = true;
                        }
                    }
                }
            });

            $("form").submit(function(){
                if(username_flag && password_flag){
                    alert("提交成功")
                    return true;
                }else{
                    alert("数据有误！")
                    return false;
                }
            });

        });
    </script>
</head>

<body>
    <form>
        用户名：<input type="text" name="username"><span id="span1"></span><br>
        密码：<input type="text" name="password"><span id="span2"></span><br>
        <input type="submit" value="登录">
    </form>
</body>

</html>