DOM练习之表单验证

最新推荐文章于 2022-07-15 19:32:24 发布

东方求败、

最新推荐文章于 2022-07-15 19:32:24 发布

阅读量98

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： javascript dom操作

本文链接：https://blog.csdn.net/wang_swa99er/article/details/119795315

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

表单验证

<!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>
        #div1{width: 200px;height: 200px;background-color: lightblue;border: 1px solid black;text-align: center;margin: auto;padding: 5%;}
        #div1 input{width: 200px;height: 30px;font-size: 18px;margin-top: 10px;}
        #div1 span{font-size: 16px;color: red;}
        #div2 {height: 60px}; 
    </style>
    <script>
        /* 
            事件驱动函数：onclick
                         onblur 失去焦点

        
        */
       function func(){
            var oUsername = document.getElementById("username");
            var oUsernameSpan = document.getElementById("username_span");

            //1.拿到输入框的内容
            var oValue = oUsername.value;
            //2.判断
            //用户名长度是否符合要求
            if(oValue.length < 6 || oValue.length > 18)
            {
                oUsernameSpan.innerHTML = "!长度应为6~18个字符";
            }else if(!isABC(oValue[0]))//判断首字母是否是字母
            {
                oUsernameSpan.innerHTML = "！邮件地址必须以英文字母开头";
            }else {
                var isYes = true;
                for(var i = 0; i < oValue.length; i++)
                {
                    if(!isDEF(oValue[i]))
                    {
                        isYes = false;
                        break;
                    }
                }
                if(isYes){
                    oUsernameSpan.innerHTML = "✅"
                }else{
                    oUsernameSpan.innerHTML = "!邮件地址需由字母、数字或下划线组成";
                }
            }
       }

       //判断单个字符是否是字母
       function isABC(charStr){
            if(charStr >= "a" && charStr <= "z" ||charStr >= "A" && charStr <= "Z")
            {
                return true;
            }else{
                return false;
            }
       }
       //判断单个字符是否符合数字、字母、下划线
       function isDEF(charStr){
            if(charStr >= "a" && charStr <= "z" ||charStr >= "A" && charStr <= "Z" ||charStr == "_" || charStr >= "0" && charStr <= "9")
            {
                return true;
            }else{
                return false;
            }
       }
    </script>
</head>
<body>
    <div id = 'div1'>
        <input id = 'username' type="text" placeholder="用户名" onblur="func();" />
        <div id = "div2"><span id ='username_span'>6-18个字符，可使用字母、数字、下划线、须以字母开头</span></div>
        <input type = "text" placeholder="密码"/>
    </div>
</body>
</html>

东方求败、

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM练习之表单验证

表单验证<!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> #div1{width:
复制链接

扫一扫