javascript - 使用js验证输入

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;
    }
})
 })

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

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