1. 首页
  2. 问题列表
  3. JQuery表单验证不能在开发浏览器上运行
提问者：小点点

JQuery表单验证不能在开发浏览器上运行


日安。 我对JavaScript和JQuery相当陌生，我正在尝试使用JQuery为一些表单字段添加一种验证表单。

我写了一个条件语句，如果全名字段为空或小于6，就会添加HTML border-danger类，并且会有一条消息要求用户输入他/她的全名。 Else（如果他已经输入了他的全名或者字段的内容大于6），应该移除边界危险类，并将状态变量更改为true。

我在我的浏览器上试用了一下，但没有用。

它的诀窍在于，当我试图在StackOverflow上，在HTML/JS/CSS代码片段页面上提出这个问题时，它成功了。 当我单击REGISTER按钮而没有在字段中键入任何内容时，border-danger类被添加到FULL NAME字段中。

为什么对我这边不起作用？ （Chrome和Opera）。 有什么需要启用的吗？

我附上了注册表单的代码（register.php）和JavaScript的代码（main.js）。 我还附上了一张来自Chrome的注册表的截图。

我肯定我搞混了什么东西。

拜托，我需要帮助。 我会非常感谢你的帮助。

满怀期待地表示感谢

JavaScript

$(document).ready(function(){
    $("#registration_form").on("submit",function(){
        var status = false; 
        var name = $("#full_name");
        var email = $("#email");
        var pass1 = $("#password1");
        var pass2 = $("#password2");
        var type = $("#usertype"); 
                                     
        if (name.val() == "" || fullName.length < 6 ) { 
            name.addClass("border-danger");
            $("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
            status = false;
        }else{
            name.removeClass("border-danger");
            $("#u_error").html("");
            status = true;
        }

    })
})

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Inventory Management System</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="../js/main.js"></script>

</head>
    <body>
    <!--Include Navbar -->
      <?php include_once("./templates/header.php");?>

    <div class="container" ">

    <div class="card mx-auto" style="width: 30rem; ">
            <div class="card-header">Register</div>
              <div class="card-body">

                <form id="registration_form" onsubmit="return false" autocomplete="off">
             <!-- Full Name -->
                  <div class="form-group">
                    <label for="full_name">Full Name</label>
                    <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
                    <small id="u_error" class="form-text text-muted">
                    </small>
                  </div>
              
                  <!-- Email -->
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
                    <small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
                  </div>

                  <!--Password 1-->
                  <div class="form-group">
                    <label for="password1">Password</label>
                    <input type="password" name="password1" class="form-control"  id="password1" placeholder="Password">
                    <small id="p1_error" class="form-text text-muted"></small>
                  </div>

                  <!-- Password 2  -->
                  <div class="form-group">
                    <label for="password2">Re-enter Password</label>
                    <input type="password" name="password2" class="form-control"  id="password2" placeholder="Password">
                    <small id="p2_error" class="form-text text-muted"></small>
                  </div>

           <!-- User type -->
                  <div class="form-group">
                    <label for="usertype">Usertype</label>
                    <select name="usertype" class="form-control" id="usertype">
                      <option value="">Choose User Type</option>
                      <option value="Admin">Admin</option>
                      <option value="Other">User</option>
                    </select>
                    <small id="t_error" class="form-text text-muted"></small>
                  </div>
                  <button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span>&nbsp;Register</button>
                  <span><a href="index.php">Login</a></span>
                </form>
              </div>

              <!-- Forgot Password? -->

            <!--              
              <div class="card-footer text-muted" >
              <a href="#">Forgot Password?</a>
              </div> -->
      </div>

    </div>
    <body>
</html>

共3个答案

匿名用户

我认为问题在于，您没有在行加载main.js文件的正确路径。 我猜您的文件夹结构是这样的:your_folder:

-----js

----------main.js

-----view_folder

----------index.html

对于您当前的代码，可能您现在面临的问题是您正在使用虚拟本地likeswww.localhost.com/view_folder/index.html我认为解决方案是，您应该尝试更改路径

从“。。。/js/main.js”到“/js/main.js”，以便告诉浏览器调用“www.localhost.com/js/main.js”，

为了避免遇到与路径相关的bug，我建议不要在script标记或link标记中的文件上使用/file.js或file.js。

。。/js/main是相对路径，因此只有当您打开的文件也是相对路径时（如双击html文件或直接打开该文件），它才会很好地工作。 所有包含在html文件中的文件路径都不应该这样使用，因为域有时可能不同。

要知道您的JS文件路径是对是错，只需尝试在DevTools中打开dom，然后右键单击，在src=“。。/js/main.js”处打开链接。

希望有帮助！

匿名用户

您的if条件和代码很少出现问题。

  1. 您根本没有检查任何内容的长度
  2. 要检查输入长度是否小于6，可以执行name.val().length
  3. 此外，您不必像name.val()==“”这样做-只需将！name.val()设置为false，这意味着输入中根本没有值。
  4. 找不到全名我确定您要使用名称

您可以在此处阅读有关jQuery-.val()的更多信息

我已经在您的if中做了一些更改，现在在下面工作得很好。 您也可以对其他输入执行一些ifelse操作，在将数据发送到PHP文件之前验证所有输入。

此外，您还需要检查main.js是否正确加载，以及路径../js/main.js是否正确。 如果路径不正确，则不会加载jQuery，按钮事件也不会工作。

Fiddle演示:https://jsfiddle.net/usmanmunir/xob1d439/2/

运行下面的代码段以查看其实际操作:

null

$(document).ready(function() {
  $("#registration_form").on("submit", function() {
    var status = false;
    var name = $("#full_name");
    var email = $("#email");
    var pass1 = $("#password1");
    var pass2 = $("#password2");
    var type = $("#usertype");

    if (!name.val() || name.val().length < 6) {
      name.addClass("border-danger");
      $("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
      status = false;
    } else {
      name.removeClass("border-danger");
      $("#u_error").html("");
      status = true;
    }
    console.log(status)
  })
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Inventory Management System</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script type="text/javascript" src="../js/main.js"></script>

</head>

<body>
  <!--Include Navbar -->
  <?php include_once("./templates/header.php");?>

  <div class="container">

    <div class="card mx-auto" style="width: 30rem; ">
      <div class="card-header">Register</div>
      <div class="card-body">

        <form id="registration_form" onsubmit="return false" autocomplete="off">
          <!-- Full Name -->
          <div class="form-group">
            <label for="full_name">Full Name</label>
            <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
            <small id="u_error" class="form-text text-muted">
                    </small>
          </div>

          <!-- Email -->
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>

          <!--Password 1-->
          <div class="form-group">
            <label for="password1">Password</label>
            <input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
            <small id="p1_error" class="form-text text-muted"></small>
          </div>

          <!-- Password 2  -->
          <div class="form-group">
            <label for="password2">Re-enter Password</label>
            <input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
            <small id="p2_error" class="form-text text-muted"></small>
          </div>

          <!-- User type -->
          <div class="form-group">
            <label for="usertype">Usertype</label>
            <select name="usertype" class="form-control" id="usertype">
              <option value="">Choose User Type</option>
              <option value="Admin">Admin</option>
              <option value="Other">User</option>
            </select>
            <small id="t_error" class="form-text text-muted"></small>
          </div>
          <button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span>&nbsp;Register</button>
          <span><a href="index.php">Login</a></span>
        </form>
      </div>

      <!-- Forgot Password? -->

      <!--              
              <div class="card-footer text-muted" >
              <a href="#">Forgot Password?</a>
              </div> -->
    </div>

  </div>

  <body>

</html>

匿名用户

你可以试着这样做

 $('#full_name').on('change', function(){
      if ($('#full_name').length <6){
        $('#full_name').addClass('border-danger');
      }
 });

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS