Question

这是我的register.php代码

<form id="register_form" onsubmit="return false" autocomplete="off" >

<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" id="username" placeholder="enter username">
<small id="u_error" class="form-text text-muted"></small>
</div>


<button type="submit" name="user_register" class="btn btn-primary"><span class="fas fa-user"></span> Register</button>

这是我的js

$(document).ready(function(){
//     alert("hello friends");
$("register_form").on("submit",function() {
    var status = false ;
    var name = $("#username");

    if (name.val() == "" || name.length < 6 ) {
        name.addClass("border-danger");
        $("#u_error").html("<span class='text danger'> name more that 6 char</span>");
        status = false;
    }else {
        name.addClass("border-danger");
        $("#u_error").html("<span class='test danger'> please enter name</span>");
        status = true;
    }
})
 })

在这里，我尝试用户名字段小于6或通过js为空，但我无法验证，但我知道为什么？

Answer 1

您的代码有太多更改。

1.html - add submit button with </form> 
2.js - your event is on '#register_form' instead of 'register_form'
3.js - To prevent on submit you have to return true or false..in you case return status; after if-else
4.js - use name.val().length instead of name.length

Answer 2

什么都没有发生，因为您正在提交表单，从而导致重定向到另一个页面或同一页面，以便使用服务器上的后端执行操作。
为了防止表单提交，请执行以下操作：

$("register_form").on("submit",function(event) {
    event.preventDefault();
    //... rest of your code

事件接口的preventDefault（）方法告诉用户代理，如果未明确处理事件，则不应像通常那样采取其默认操作。

Event.preventDefault()

此外，您现在正在检查name的值是否为空，或者ID为username的元素的数量是否小于6。要检查{{1}的值的长度}，请执行以下操作：

name

Answer 3

根据长度而不是对象的长度计数，将name.length更改为name.val().length

if (name.val() == "" || name.val().length < 6 ) {

相反，我建议在这里更改

var name = $("#username").val();

并按如下所示进行检查，无需检查是否为空，只需name.length < 6就足够了

if (name.length < 6 ) {

Answer 4

$(document).ready(function(){
  $('#frm').submit(function(){
    if(!$('#name').val()){
      alert('Please enter your name');
    }
    else if(!$('#age').val()){
      alert('Please enter your age');
    }
    else if(!$('#mobile').val()){
      alert('Please enter your mobile');
    }
    else if(!$('#email').val()){
      alert('Please enter your email');
    }
  });
});

<html>
    <head>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <form id="frm">
            <input type="text" name="name" id="name" placeholder="Name..."><br><br>
            <input type="number" name="age" id="age" placeholder="Age..."><br><br>
            <input type="number" name="mobile" id="mobile" placeholder="Mobile..."><br><br>
            <input type="email" name="email" id="email" placeholder="Email..."><br><br>
            <input type="submit" name="submit" id="submit">
        </form>
    </body>
</html>

用js验证输入

4 个答案: