HTML异步刷新-验证账号是否存在

无忧#

于 2021-12-07 17:55:44 发布

阅读量549

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_52473454/article/details/121775092

版权

本文介绍了一种通过onkeyup事件实现的实时输入验证方法，无需使用AJAX。示例代码展示了一个简单的账号可用性检查，当用户在文本框中输入时，即时显示账号是否合法或已被占用，颜色提示直观明了。该方法简化了异步刷新的过程，提高了用户体验。

摘要由CSDN通过智能技术生成

曾经为了做到异步刷新，我百度了许多AJAX的教程（为什么xmlhttp.readyState=1，xmlhttp.status=0后来发现异步刷新也不是非得用AJAX才能做到，只需要写一个函数，通过onkeyup调用即可。

效果：

全部代码：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>验证注册</title>
</head>
<body>
<input type="text" onkeyup="f1()" id="s1">
<span id="s2"></span>
<script>
    function f1() {
        var s = document.getElementById("s1").value;
        if(s.length==0||s.length>11){
        	document.getElementById("s2").innerHTML="账号长度不合法";
        	document.getElementById("s2").style.color="yellow";
        }else{
          if (s[0] == "a" || s[0] == "A") {
            document.getElementById("s2").innerHTML = "账号已经存在";
            document.getElementById("s2").style.color="red";
        } else {
            document.getElementById("s2").innerHTML = "账号可以使用";
            document.getElementById("s2").style.color="green";
        }
        }
    }
</script>
</body>
</html>