SOURCE

console 命令行工具 X clear

                    
>
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>