若是前生未有缘 2021-01-12 13:33 采纳率: 100%
浏览 40
已采纳

简单的jQuery表单验证失败

刚自学jQuery进行表单验证    就第一个用户名就失败了     按钮提交后直接就跳转了  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //给注册绑定单击事件
            $("#sub_btn").click(function () {
                //获取用户输入框内容
             var usernameText = $("#username").val();
                //创建正则表达式
             var usernamePatt = /^\w{5,12}$/;
             if (!usernamePatt.test(usernameText)){
                $("span.errorMsg").text("用户名不合法");
                return false;
             }
                $("span.errorMsg").text("");
            });
        });
    </script>
    </style>
</head>
<body>

        <div class="form" id="center">
            <form action="http://localhost:8080">
                <label>用户名称:</label>
                <input class="itxt" type="text" name="username" placeholder="请输入用户名" autocomplete="off" >
                <span class="errorMsg"></span><br>
                <label>用户密码:</label>
                <input type="password" name="password" placeholder="请输入密码"><br>
                <label>确认密码:</label>
                <input type="password" name="repassword" placeholder="请再次输入密码"><br>
                <label>电子邮件:</label>
                <input type="text" name="email" placeholder="请输入电子邮件"><br>
                <label>验证码:</label>
                <input type="text" id="code" placeholder="请输入验证码"><br>
                <input type="submit" id="sub_btn" value="注册">
            </form>
        </div>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • JSON_L 2021-01-12 14:33
    关注

    你的代码有两个问题：

    1.style标签不完整

    2.用户名称的输入框未加id，而jquery获取的时候使用的是id选择器；

    附修改后的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <script type="text/javascript" src="../jquery-3.2.1.js"></script>
    <style></style>
</head>
<body>
<div class="form" id="center">
    <form action="http://localhost:8080">
        <label>用户名称:</label>
        <input class="itxt" type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off">
        <span class="errorMsg"></span><br>
        <label>用户密码:</label>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <label>确认密码:</label>
        <input type="password" name="repassword" placeholder="请再次输入密码"><br>
        <label>电子邮件:</label>
        <input type="text" name="email" placeholder="请输入电子邮件"><br>
        <label>验证码:</label>
        <input type="text" id="code" placeholder="请输入验证码"><br>
        <input type="submit" value="注册" id="sub_btn">
    </form>
</div>
<script type="text/javascript">
    $(function () {
        //给注册绑定单击事件
        $("#sub_btn").click(function () {
            //获取用户输入框内容
            var usernameText = $("#username").val();
            //创建正则表达式
            var usernamePatt = /^\w{5,12}$/;
            if (!usernamePatt.test(usernameText)) {
                $("span.errorMsg").text("用户名不合法");
                return false;
            }
            $("span.errorMsg").text("");
        });
    });
</script>
</body>
</html>

    效果：

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 unity第一人称射击小游戏，有demo，在原脚本的基础上进行修改以达到要求
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）