JavaScript实现密码验证-优快云博客

本文链接：https://blog.youkuaiyun.com/starry__sty/article/details/108666361

本文介绍如何使用JavaScript进行密码验证，包括基本的验证规则和实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

密码验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户名验证</title>
</head>
<body>
    <form action="1.html" id='form1'>
        用户名<input type="text" id='userName' value='哈哈'><span></span>
        <input type="submit" value='注册'>
    </form>
   
    <script>
        var flag = false
        var username = document.getElementById('userName')  //input框
        username.onblur=function(){
            //失去焦点事件
            // console.log(username.value);  //用户输入的value值
            var a = /^[A-Z][a-z|0-9|A-Z]{4,17}$/.test(username.value)
            //要求以大写字母开头的,长度5-18位
            if(a){
                // console.log(username.nextSibling)
                username.nextSibling.innerHTML='√'  //或下一个兄弟节点,并且设置他的html值为√
                username.nextSibling.style.color="green"
                flag = true
            }else{
                console.log('账号格式不符合')
                username.nextSibling.innerHTML='x'
                username.nextSibling.style.color="red"
                flag = false



            }
        }

        var form1 = document.getElementById('form1')
        form1.onsubmit=function(){
            //如果 return  false  会阻止表单的默认行为(提交)
            return flag
        }
      
   
    </script>
</body>
</html>

js密码验证

密码验证