JavaScript 11.05

最新推荐文章于 2024-07-26 11:41:15 发布

WGY0227

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量88

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/WGY0227/article/details/121166513

版权

JavaScript 第八天

1.1 表单验证思路

层级搭建 
1  搭建一个表单  提示span全部是隐藏的
2  用户输入状态的时候（得到焦点） 只有提示的span显示
3  用书停止输入的时候（失去焦点）
    A  如果什么都没有输入   恢复到原始状态
    B  如果输入了并且输入错误  只有错误的span显示
    C  如果输入了并且输入正确   只有正确的span显示
4  无论之前显示错误提示还是正确提示  再次输入 都只显示提示span

1.2 表单页面的搭建


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        
        <style type="text/css">
            
            fieldset {
                width: 500px;
                margin: 200px  auto;
                padding: 30px;
                background-color: white;
                border-radius: 10px;
            }
            
            body,html{
                height: 93%;
            }
            body{
                background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile2.img.badcatu.com%2Fs%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F7af40ad162d9f2d34c7311c1a2ec8a136327ccb9.jpg) no-repeat center center / 100% 95%;
            }
            
            .form-group span {
                display: none;
            }
            
        </style>
        
        
    </head>
    <body>
            
        
        
        <fieldset id="">
            <center><h3>用户注册</h3></center>
            <form>
                
              <div class="form-group">
                <label >账号：</label>
                <input  class="form-control" placeholder="请输入账号">
                <span class="label label-default">提示信息</span>
                <span class="label label-success">正确输入提示</span>
                <span class="label label-danger">错误提示输入</span>
              </div>
              <div class="form-group">
                <label >密码：</label>
                <input type="password" class="form-control" placeholder="请输入密码">
                <span class="label label-default">提示信息</span>
                <span class="label label-success">正确输入提示</span>
                <span class="label label-danger">错误提示输入</span>
              </div>
              <div class="form-group">
                <label >重复密码：</label>
                <input type="password" class="form-control" placeholder="请再次输入密码">
                <span class="label label-default">提示信息</span>
                <span class="label label-success">正确输入提示</span>
                <span class="label label-danger">错误提示输入</span>
              </div>
              <div class="form-group">
                <label >邮箱：</label>
                <input  class="form-control" placeholder="请输入邮箱">
                <span class="label label-default">提示信息</span>
                <span class="label label-success">正确输入提示</span>
                <span class="label label-danger">错误提示输入</span>
              </div>
              
              <button type="submit" class="btn btn-danger btn-block">注册</button>
            </form>
            
        </fieldset> 
            
            
    </body>
</html>

1.3 效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <style type="text/css">
            fieldset {
                width: 500px;
                margin: 200px auto;
                padding: 30px;
                background-color: white;
                border-radius: 10px;
            }

            body,
            html {
                height: 93%;
            }

            body {
                background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile2.img.badcatu.com%2Fs%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F7af40ad162d9f2d34c7311c1a2ec8a136327ccb9.jpg) no-repeat center center / 100% 95%;
            }

            .form-group span {
                display: none;
                position: absolute;
                top: 60px;
            }
            .form-group {
                position: relative;
            }
            .form-control{
                margin-bottom: 18px;
            }
        </style>


    </head>
    <body>



        <fieldset id="">
            <center>
                <h3>用户注册</h3>
            </center>
            <form action="http://www.baidu.com" method="post"  id="foo">

                <div class="form-group">
                    <label>账号：</label>
                    <input class="form-control" placeholder="请输入账号" id="zh">
                    <span class="label label-default">提示信息</span>
                    <span class="label label-success">正确输入提示</span>
                    <span class="label label-danger">错误提示输入</span>
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input type="password" class="form-control" placeholder="请输入密码" id="mm">
                    <span class="label label-default">提示信息</span>
                    <span class="label label-success">正确输入提示</span>
                    <span class="label label-danger">错误提示输入</span>
                </div>
                <div class="form-group">
                    <label>重复密码：</label>
                    <input type="password" class="form-control" placeholder="请再次输入密码" id="rmm">
                    <span class="label label-default">提示信息</span>
                    <span class="label label-success">正确输入提示</span>
                    <span class="label label-danger">错误提示输入</span>
                </div>
                <div class="form-group">
                    <label>邮箱：</label>
                    <input class="form-control" placeholder="请输入邮箱"  id="yx">
                    <span class="label label-default">提示信息</span>
                    <span class="label label-success">正确输入提示</span>
                    <span class="label label-danger">错误提示输入</span>
                </div>

                <button type="submit" class="btn btn-danger btn-block">注册</button>
            </form>

        </fieldset>


        <script type="text/javascript">
            
            foo.onsubmit = function(){
                var arr = document.querySelectorAll(".label-success");
                for(var i=0;i<arr.length;i++){
                    var s = arr[i];
                    if(s.style.display == "none" || s.style.display == ""){
                        alert("请正确输入");
                        return  false;
                    }
                }
            }
            
        
        
        
            yx.onblur = function() {
                this.parentElement.children[2].style.display = "none";
                if (yx.value.length > 0) {
                    var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    if (reg.test(yx.value)) {
                        this.parentElement.children[3].style.display = "inline";
                    } else {
                        this.parentElement.children[4].style.display = "inline";
                    }
                }
            }
        
            rmm.onblur = function() {
                this.parentElement.children[2].style.display = "none";
                if (rmm.value.length > 0) {
                    if (  mm.value == rmm.value  ) {
                        this.parentElement.children[3].style.display = "inline";
                    } else {
                        this.parentElement.children[4].style.display = "inline";
                    }
                }
            }

            mm.onblur = function() {
                this.parentElement.children[2].style.display = "none";
                if (mm.value.length > 0) {
                    var reg = /^[a-zA-Z]\w{5,15}$/;
                    if (reg.test(mm.value)) {
                        this.parentElement.children[3].style.display = "inline";
                    } else {
                        this.parentElement.children[4].style.display = "inline";
                    }
                }
            }


            zh.onblur = function() {
                this.parentElement.children[2].style.display = "none";
                if (zh.value.length > 0) {
                    var reg = /^[a-zA-Z]\w{5,15}$/;
                    if (reg.test(zh.value)) {
                        this.parentElement.children[3].style.display = "inline";
                    } else {
                        this.parentElement.children[4].style.display = "inline";
                    }
                }
            }


            var arr = document.querySelectorAll(".form-control");
            for (var i = 0; i < arr.length; i++) {
                var a = arr[i];
                a.onfocus = function() {
                    this.parentElement.children[2].style.display = "inline";
                    this.parentElement.children[3].style.display = "none";
                    this.parentElement.children[4].style.display = "none";
                }
            }
        </script>


    </body>
</html>

1.4 正则表达式

A  会用
    
正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。
正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。
许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

           var  reg = /^[\u4e00-\u9fa5]{0,}$/;  //创建一个正则规则
            
            var a = prompt();
            
            if(   reg.test(  a )   ){
                alert(123);
            }else{
                alert(456);
            }   
    

B 简单的正则符号
    
            var  reg = /red/;  //创建一个正则规则
            
            var a = "i  like  red";
            
            if(   reg.test(  a )   ){
                alert(123);
            }else{
                alert(456);
            }
    正则什么符号都不加的时候 代表  目标字符串只要包含正则内容 则成立
    
   .点 匹配除“\n”和"\r"之外的任何单个字符。要匹配包括“\n”和"\r"在内的任何字符，请使用像“[\s\S]”的模式。
   * 匹配前面的子表达式任意次。
   + 匹配前面的子表达式一次或多次
   ? 匹配前面的子表达式零次或一次
   \ 转义符
   [xyz]   字符集合  [0-9]  [0-9a-zA-Z]
    {}     限定位数     {5}  {5,} {5,10}
  ^  匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
  $  匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。

WGY0227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 11.05

JavaScript 第八天1.1 表单验证思路层级搭建 1 搭建一个表单提示span全部是隐藏的2 用户输入状态的时候（得到焦点）只有提示的span显示3 用书停止输入的时候（失去焦点） A 如果什么都没有输入恢复到原始状态 B 如果输入了并且输入错误只有错误的span显示 C 如果输入了并且输入正确只有正确的span显示4 无论之前显示错误提示还是正确提示再次输入都只显示提示span1.2 表单页面的搭建&...
复制链接

扫一扫