JQuery实例

已经经过测试，可以账密为空的时候提示账密不能为空
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<p><label for="i1"><input type="text" id='i1' name="username"><span id='s1'></span></label></p>
<p><label for="i2"><input type="password" id='i2' name="password"><span id='s2'></span></label></p>
<input type="submit" value="注册" id='d1'>

<script>
    var d1Ele = $('#d1');
    var $username = $('#i1');
    var $password = $('#i2');
    d1Ele.on('click', function () {
        if ($username.val().length === 0) {
            $('#s1').text('用户名不能为空')
        }
        if ($password.val().length === 0) {
            $('#s2').text('密码不能为空')
        }
        return false //取消提交按钮之后的刷新操作
    });
    $username.on('focus',function () {
        $('#s1').text('');
        $('#s2').text('')


    });
    $password.on('focus',function () {
        $('#s1').text('');
        $('#s2').text('')


    });
</script>
</body>
</html>