javascript - Javascript - 使用jQuery进行用户注册表单验证

我正在尝试创建一个学习/运动的网站,但是,我仍然坚持使用用户注册验证。没有错误消息,也没有发生什么。

下面是JsFiddle链接

我也尝试过:


if(user_name.length < 3 && user_name!=="")




if(user_name.length < 3)



代码Fragment:


var user_name = $('#username').val();



$('#username').on('keyup',function(){


 if(user_name.length < 3 && user_name!=""){


 $('#username-info').html('Username must be at least 3 characters.');


 }


 else if(user_name.length > 3){


 $('#username_info').html('No problem');


 }


});

#username-info {


 color: red;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" id="username">


<p id="username-info"></p>
时间:

我认为你设置了错误的id,并且变量user_name只在开始时初始化一次,所以,它的值总是空的。


$('#username').on('keyup', function() {


 var user_name = $(this).val();


 if (user_name.length < 3 && user_name != "") {


 $('#username-info').html('Username must be at least 3 characters.');


 } else if (user_name.length > 3) {


 $('#username-info').html('No problem');


 }


});

#username-info {


 color: red;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" id="username">


<p id="username-info">


</p>

你的脚本中有很多错误,


 var user_name = ""


$('#username').on('keyup',function(){


 user_name = $('#username').val();



if(user_name.length <= 3 && user_name!=""){


$('#username-info').html('Username must be at least 3 characters.');


}


else if(user_name.length > 3){


$('#username-info').html('No problem');


}


});



我使用您的代码作为参考,并对它进行了一些更改以获得更好的输出。


$('#username').on('keyup',function(){


 var user_name = $('#username').val();


        if(user_name.length < 3 && user_name != ""){


         $('#username-info').html('Username must be at least 3 characters.');


                $('#username-info').addClass('username-info');


                $('#username-info').removeClass('username-info-2');


        }


        else if(user_name.length >= 3){


                $('#username-info').html('No problem');


                $('#username-info').addClass('username-info-2');


                $('#username-info').removeClass('username-info');


        }


});

.username-info {


 color: red;


 }


.username-info-2 {


 color: blue;


 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input type="text" id="username">



<p id="username-info"></p>

当前,user_name在脚本的开始处声明了一次,因此它永远不会被更新。

然后,在<p#username-info>上附加keyup事件处理程序,而不是<input#username>,因此在输入内容时,不会触发任何内容。

因此,你需要在每个输入中更新user_name<input#username>


// Here, you need to attach the event handler of #username, not #username-info.


$('#username').on('keyup', function() {


 // And here, you get the value of your input.


 let user_name = $('#username').val();


 // let user_name = $(this).val(); works too.



 // Writing "(user_name)" in a condition is the same as "(user_name !== '')".


 if (user_name && user_name.length < 3) {


 $('#username-info').html('Username must be at least 3 characters.');


 } else if (user_name.length >= 3) {


 // You wrote "#username_info" instead of "#username-info" here.


 $('#username-info').html('No problem');


 }


});

#username-info {


color: red;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<input type="text" id="username">


<p id="username-info">


</p>

keyup函数需要在输入字段上触发。

keyup函数更新username (否则会是一样的)。


$('#username').on('keyup',function(){


 var user_name = $('#username').val();


 if(user_name.length < 3 && user_name!=""){


 $('#username-info').html('Username must be at least 3 characters.');


 }


 else if(user_name.length >= 3){


 $('#username-info').html('No problem');


 }


});



...