JavaScript 11.05

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”之前的位置。

 

posted @ 2021-11-05 16:54  吴光熠  阅读(95)  评论(0)    收藏  举报