js用正则表达式实现页面注册和密码强度验证

最新推荐文章于 2022-07-21 11:28:23 发布

爬不动的猫

最新推荐文章于 2022-07-21 11:28:23 发布

阅读量453

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49219273/article/details/107545324

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js用正则表达式实现页面注册和密码强度验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:red;
        }
    </style>
</head>
<body>
    <form action="success.html">
        邮箱：<input type="text" id="tet" >
        <div id="box"></div><br/>
        密码：<input type="password" id="pas">
        <div id="bos"></div><br/>
        <input type="submit" id="but" value="注册">
    </form>
    <script>
                /* 
        1. 实现一个注册页面的效果
            - 表单输入正确，注册按钮可以点击
            - 否则的话，哪个表单错误在对应表单处进行提示
        */
        var tet=document.getElementById('tet');
        var but=document.getElementById('but');
        var box=document.getElementById('box')
        var reg1 = /^[^_$].{6,}@(163|126|qq|sina)\.(com|cn|net)$/
            tet.oninput=function(){
                var str3 = tet.value;
                console.log(str3);
                if(reg1.test(str3)){
                    box.innerHTML="此邮箱可以使用"
                }else{
                    box.innerHTML="注意邮箱格式！"
                }
                console.log(reg1.test(str3))
            }
        //2. 实现密码强度验证
        var pas=document.getElementById('pas');
        var bun=document.getElementById('bun');
        var bos=document.getElementById('bos')
        var reg2=/^\d+$/;
        var reg3=/^([a-z]+|[A-Z]+)$/;
        var reg4=/^\w+$/
        pas.oninput=function(){
            var str4 = pas.value;
            console.log(str4);
            if(str4.length<6 || str4.length>10){
                bos.innerHTML="请输入6-10位密码"
            }else if(reg2.test(str4)){
                bos.innerHTML="密码强度：弱"
            }else if(reg3.test(str4)){
                bos.innerHTML="密码强度：中"
            }else if(reg4.test(str4)){
                bos.innerHTML="密码强度：较强"
            }else{
                bos.innerHTML="密码强度：强"
            }
        }
    </script>

若要使用提交按钮，则给前两个事件操作分别套上函数checkUsername()和checkUsername()，然后在执行以下代码。

//3 在点击submit按钮的时候,会触发form的默认的提交事件
var form = document.querySelector('form');
form.onsubmit = function(e){
	//点击提交,再次监测用户和密码是否合格,如果有一个不合格,就不跳转
	if(!(checkUsername()&&checkPassword())){
		//阻止表单的默认提交
		e = window.event||e;
		e.preventDefault?e.preventDefault():e.returnValue=false;
	}
}

爬不动的猫

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js用正则表达式实现页面注册和密码强度验证

js用正则表达式实现页面注册和密码强度验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫