console
$(function(){
$('span').css("color","red").css("font-size","0.7m")
$('button').click(()=>{
let uname = $('#uname').val()
let pwd = $('#pwd').val()
if(uname === null||uname.length<=0 )
{
$('#uname').next('span').text('用户名不能为空')
}
if(pwd === null||pwd.length<=4 )
{
$('#pwd').next('span').text('密码不能为空,且不能少于4位')
}
return false
})
$('#uname').focus(function(){
$(this).next('span').text('')
})
$('#pwd').focus(function(){
$(this).next('span').text('')
})
$('#uname').blur(function(){
let uname = $(this).val()
if(uname === null || uname.length<=0)
{
$('#uname').next('span').text('用户名不能为空')
}
})
$('#pwd').blur(function(){
let pwd = $(this).val()
if(pwd === null || pwd.length<=0)
{
$('#pwd').next('span').text('密码不能为空,且不能少于4位')
}
})
})
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<div>
<input id='uname' placeholder="用户名"/>
<span></span>
</div>
<div>
<input id='pwd' placeholder="密码" type="password"/>
<span></span>
</div>
<div>
<button>登录</button>
</div>
</form>