jQuery常用dom操作之验证用户名

先引入库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

css

form{
    display: grid;
    width: 20em;
    gap:1em;
    border:1px solid gray;
    padding: 1em;
}

html

<form action="check.php">
    账号：<input type="text" name="username" />
    密码：<input type="password" name="password" />
    <button>登录</button>
</form>

js

// 禁用表单的默认提交行为
$("form").submit(ev=>ev.preventDefault());
//document.querySelector("form").onsubmit=ev=>ev.preventDefault();//原生写法
// 验证用户名是否为空，为空则提示不能为空，不为空验证用户名是否存在，存在则提示已存在，不存在提示可以注册
const user=$("input[name='username']");
//失去焦点时进行验证
user.blur(function(){
    //不能使用箭头函数，因为箭头函数没有自己的this，它的this来自上上文
    // 提示信息
    let tips="";
    // 用户列表（用于测试）
    const users=['admin','web','jy'];
    //进行非空验证
    if($(this).val().length===0){
        //值得长度为0进行提示
        tips="用户名不能为空";
        $(this).focus();//激活输入框
    } else if(users.indexOf($(this).val())===-1){
        //返回-1则表示此值在用户列表中没有
        tips="用户名不存在，请注册"+"<button>注册</button>";
    }else{
        tips="<i style='color:green;'>用户名正确</i>";
    }
    //防止提示信息重复插入页面(判断其下一个元素的名字时不是SPAN)
    if($(this).next()[0].tagName!=="SPAN"){
        $("<span></span>").html(tips).css("color","red").insertAfter($(this));
    }
})
//用户修改文本的输入时，将提示信息清空
user.on("input",function(){
    $(this).next("span").remove();
})