简单登录

最新推荐文章于 2023-07-09 23:35:57 发布

诸葛苍穹

最新推荐文章于 2023-07-09 23:35:57 发布

阅读量298

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/u012260672/article/details/51925681

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>js02.html</title>
    <script type="text/javascript">
        function checkName(){
            //1. 获取文本框的值
            var name=document.getElementById("name").value;
            //2. 验证格式是否合法
            //3. 根据不同的验证结果  提示不同的信息
            var span=document.getElementById("name_msg");
            //使用正则表达式验证
            var exp=/^\w{8,15}$/;
            if(exp.test(name)){
                //合格
                span.style.color="green";
                span.innerHTML="格式正确";
                return true;
            }else{
                //不合格
                span.style.color="red";
                span.innerHTML="格式错误(单词字符[8,15])";
                return false;
            }
        }

        function checkPwd(){
            //1. 获取文本框的值
            var pwd=document.getElementById("pwd").value;
            //2. 验证格式是否合法
            //3. 根据不同的验证结果  提示不同的信息
            var span=document.getElementById("pwd_msg");
            var exp=/^\d{6}$/;
            if(exp.test(pwd)){
                //合格
                span.style.color="green";
                span.innerHTML="格式正确";
                return true;
            }else{
                //不合格
                span.style.color="red";
                span.innerHTML="格式错误(6位数字)";
                return false;
            }
        }
        function checkForm(){
            return checkName() && checkPwd();
        }
    </script>
</head>
<body>
<h1>登录</h1>
<form action="login.do"  onsubmit="return checkForm();">
    账号：<input onblur="checkName()" type="text"  id="name" />
    <span id="name_msg"></span>
    <br/><br/>
    密码：<input onblur="checkPwd()" type="password" id="pwd"/>
    <span id="pwd_msg"></span>
    <br/><br/>
    <input type="submit" value="登录"/>
</form>
</body>
</html>

诸葛苍穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单登录

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>j
复制链接

扫一扫