首页 > 解决方案 > 用js验证输入

问题描述

这是我的 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 为空,但它不起作用我可以知道为什么吗?

标签: javascriptphpjquery

解决方案


你的代码有很多变化。

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

推荐阅读