<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<script>
window.onload=function(){
  var pattern=/\d+/g;
  var str="hello122i45ehe9876";
  var strArr=str.match(pattern);
  for(i=0;i<strArr.length;i++){
    document.write("匹配的第"+i+"个数字是："+strArr[i]+"<br>"); 
  }
}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<script>
window.onload=function(){
  var pattern=/[A-Za-z]*is+/g;
  var str="This is test regex .";
  var strArr=str.match(pattern);
  for(i=0;i<strArr.length;i++){
    document.write("匹配的第"+i+"个数字是："+strArr[i]+"<br>"); 
  }
}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<script>
window.onload=function(){
  var mobileArr=new Array("13312345678","13712345678","18012345678","189123456789","1531234567","181123456789");
  var pattern=/^1[35]3\d{8}|18[019]\d{8}$/;
  document.write("手机号列表如下：<br>");
  for(i=0;i<mobileArr.length;i++){
    document.write(mobileArr[i]+"<br>");
  }
  document.write("<br>符合电信手机号规则的列表如下：<br>");
  for(i=0;i<mobileArr.length;i++){
    if(pattern.test(mobileArr[i]))
       document.write(mobileArr[i]+"<br>");
  }

}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分组正则表达式</title>
<script>
window.onload=function(){
  var ipArr=new Array("98.a.3.3","192.168.1.1","172.268.3.4","10-1-2-1");
  var pattern=/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
  document.write("地址列表如下：<br>");
  for(i=0;i<ipArr.length;i++){
    document.write(ipArr[i]+"<br>");
  }
  document.write("<br>其中的IP地址列表如下：<br>");
  for(i=0;i<ipArr.length;i++){
    if(pattern.test(ipArr[i]))
       document.write(ipArr[i]+"<br>");
  }

}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后向引用正则表达式</title>
<script>
window.onload=function(){
  var numberArr=new Array("1212","1234","1221","1231");
  //var pattern=/(\d)(\d)\2\1|(\d)(\d)\3\4/;
  var pattern=/(?<n1>\d)(?<n2>\d)\k<n2>\k<n1>|(?<m1>\d)(?<m2>\d)\k<m1>\k<m2>/;
  document.write("数字列表如下：<br>");
  for(i=0;i<numberArr.length;i++){
    document.write(numberArr[i]+"<br>");
  }
  document.write("<br>其中符合abba或abab的列表如下：<br>");
  for(i=0;i<numberArr.length;i++){
    if(pattern.test(numberArr[i]))
       document.write(numberArr[i]+"<br>");
  }

}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>忽略大小写修饰符</title>
<script>
window.onload=function(){
  var str="LiNuxand php,aaaLINUXaa and linux and lamp";
  var pattern=/linux/ig;
  document.write("源串如下：<br>"+str);
  strArr=str.match(pattern);
  document.write("<br>找到的linux子串如下：<br>");
  for(i=0;i<strArr.length;i++){
       document.write(strArr[i]+"<br>");
  }
}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>换行修饰符</title>
<script>
window.onload=function(){
  var str="Linuxand php,\nLINUXaa and linux and lamp";
  var pattern=/^linux/igm;  //把每一行中以linux开头的匹配出来
  document.write("源串如下：<br>"+str);
  strArr=str.match(pattern);
  document.write("<br>找到的linux子串如下：<br>");
  for(i=0;i<strArr.length;i++){
       document.write(strArr[i]+"<br>");
  }
}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪婪模式</title>
<script>
window.onload=function(){
  var str="<b>Linux</b> an <b>php</b> linux abc";
  var pattern=/<b>.*<\/b>/g;
  document.write("源串如下：<br>"+str);
  strArr=str.match(pattern);
  document.write("<br>找到的匹配的子串如下：<br>");
  for(i=0;i<strArr.length;i++){
       document.write(strArr[i]+"<br>");
  }
}
</script>
</head>
<body>
</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式test方法</title>
<script>
window.onload=function(){
 var myBtn=document.getElementById("btn");
 myBtn.onclick=function(){
     //获取文本框中用户输入Email的信息 
 var objStr=document.getElementById("email").value; 
 //设置匹配Email的正则表达式 
 var rgExp=/^\w+@(\w+[.])*\w+$/; 
 //如果判断字符串中是否存在匹配内容，如果存在提示正确信息，否则返回错误 
 if(rgExp.test(objStr)){ 
    alert("该Email地址是合法的!"); 
  }else{ 
   alert("该Email地址是非法的!"); 
  } 
 } 
}
</script>
</head>
<body>
<br><br><br><br><br><br><br>
请输入Email地址： 
<input type="text" id="email">
<input type="button" value="检测合法性" id="btn">

</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式match方法</title>
<script>
window.onload=function(){
 var url = 'http://www.baidu.com?a=1&b=2&c=3';
 var reg = /([^?&=]+)=([^?&=])*/;
 var result = url.match(reg);
 document.write(result+"<br>"); //输出 a=1, a, 1
 document.write(result.index+"<br>"); //21
 document.write(result.input+"<br>"); //http://www.baidu.com?a=1&b=2&c=3
}
</script>
</head>
<body>


</body>
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<script>
window.onload=function(){
  var strObj="This is test page!"
  var reg=/is|es|ag/g;    
  strResult=strObj.replace(reg,"**");    
  document.write("源串是："+strObj+"<br>");
  document.write("目的串是："+strResult);
  
}
</script>
</head>
<body>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<script>
window.onload=function(){
 var re=/(\d)(\d)\d\2\1/;    //设置正则表达式 
 var ostr="253212328";        //所要匹配的字符串，字符串第一个位置从0开始 
 var pos=ostr.search(re);//进行字符串匹配 
 if(pos==-1){
  document.write("没有找到任何匹配"); 
 } 
 else{ 
    arr=ostr.match(re);//进行match找出匹配的内容 
    document.write("在位置"+pos+"，找到第一个匹配，匹配内容为："); 
    document.write(arr[0]);//输出匹配的内容 
 } 
}
</script>
</head>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style>
span{ color:red; font-weight:bold; display:none;}
</style>
<script>
window.onload=function(){
  var myTestBtn=document.getElementById("sub");
  var myTestRegex=document.getElementsByClassName("regex");
  var myError=document.getElementsByClassName("error");
  for(i=0;i<myTestRegex.length;i++){
      myTestRegex[i].index=i;
      myTestRegex[i].onblur=function(){
         switch(this.index){
           case 0:var reg=/^\w{6,15}$/;
                 spaceError="用户名不能为空！";
                 regError="用户名在6~15位之间";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
           case 1:var reg=/^\w{6,15}$/;
                 spaceError="密码不能为空！";
                 regError="密码6~15字母、数字、下划线";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
           case 2:
                 if(myTestRegex[2].value==""){
                    myError[2].style.display="inline";
                      myError[2].innerHTML="确认密码不能为空！";
                        myTestRegex[2].data=1;
                 }
                 if(myTestRegex[1].value!=myTestRegex[2].value){
                    myError[2].style.display="inline";
                      myError[2].innerHTML="密码与确认密码不相同！";
                        myTestRegex[2].data=1;
                  }
                 break;
           case 3:var reg=/^1[3578]\d{9}$/;
                    spaceError="手机号必须输入不能为空！";
                 regError="手机必须是以13，15，17，18开头的11位数字";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
           case 4:var reg=/^\w+@(\w+[.])*\w+$/;
                 spaceError="邮箱不能为空！";
                 regError="邮箱不符合规则";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
         }
      }
  }
  function testResult(object,reg,index,spaceError,regError){
        var value=object.value;
        var result=reg.test(value);
        if(value==""){
          myError[index].style.display="inline";
          myError[index].innerHTML=spaceError;
          object.data=1;
        } else if(result){
            myError[index].style.display="none";
            object.data=0;
          }else{
           myError[index].style.display="inline";
           myError[index].innerHTML=regError;
           object.data=1;
          }
    }
  myTestBtn.onclick=function(){
     total=0;
     for(i=0;i<myTestRegex.length;i++){
         myTestRegex[i].onblur();
         total+=myTestRegex[i].data;
     }
     if(total>0)    return false;    
        else return true;
  }
}
</script>
</head>

<body>
<form action="reg.php" method="get">
  用&nbsp;&nbsp;户&nbsp;&nbsp;名:
  <input type="text" id="username" name="username" class="regex">
  <span class="error">用户名在6~15位之间</span>
  <br>
  密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
  <input type="password" id="pwd" name="pwd"  class="regex">
  <span class="error"></span>
  <br>
  确认密码:
  <input type="password" id="c_pwd" name="c_pwd" class="regex">
  <span class="error"></span>
  <br>
  手&nbsp;&nbsp;机&nbsp;&nbsp;号:
  <input type="text" id="mobile" name="mobile" class="regex">
  <span class="error"></span>
  <br>
  邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:
  <input type="text" id="email" name="email" class="regex">
  <span class="error"></span>
  <br>

  <input type="submit" id="sub" value="注册">
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script> 
window.onload=function(){
 var selectPro=""
 var proArr=new Array("河南","湖北","湖南");
 var arr = new  Array();
 arr[0]="郑州,开封,洛阳,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河" 
 arr[1]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江" 
 arr[2]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化" 
 var city = document.getElementById("city");
 var province=document.getElementById("province");
 var result=document.getElementById("result");
 var cityArr = arr[0].split(",");
 initCity(0);
 function initCity(index){
     var cityArr = arr[index].split(","); 
     for(var i=0;i<cityArr.length;i++)
     {
       city[i]=new Option(cityArr[i],cityArr[i]);
     }
     selectPro=proArr[province.value];
     result.innerHTML=selectPro+"省"+cityArr[0]+"市";
 }
 province.onchange=function(){    
    var index = province.selectedIndex;
    //将城市数组中的值填充到城市下拉框中
    initCity(index);
 }
 city.onchange=function(){
     result.innerHTML=selectPro+"省"+city.value+"市";
 }
}
</script>

</head> 
<body > 
请您选择省份：
<select id="province" size="1"> 
<option value="0">河南</option> 
<option value="1" >湖北</option> 
<option value="2" >湖南</option> 
</select><br>
请您选择城市：
<select id="city" style="width:60px"> 
</select> <br>
您选择的结果是：<span id="result" style="color:red"></span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>评分</title>
<style>
*{margin:0px; padding:0px;}
#box{    width:600px; 
        height:115px; 
        background:pink;
        margin:0 auto;}
#box ul {list-style:none;}
#box ul li{ background:url(1.jpg) no-repeat; width:120px; height:115px;
float:left; cursor:pointer;}
#box ul li.active{background:url(1.jpg) 0px -115px;}
</style>
<script>
 window.onload=function(){
       var myLI=document.getElementsByTagName("li");
       var py=["非常差","差","一般","好","非常好",];
       for(var i=0;i<myLI.length;i++){
           myLI[i].index=i;//用来指出哪一个
           myLI[i].onmouseover=function(){
           for(var j=0;j<this.index+1;j++)
             myLI[j].className="active";
           };
           myLI[i].onmouseout=function(){
                for(var j=0;j<this.index+1;j++)
                myLI[j].className="";
           };
           myLI[i].onclick=function(){
                alert("您的评分分数是："+(this.index+1)+
                "分，您的评语是："+py[this.index])
           };
       }
    };
    </script>

</head>

<body>
<div id="box">
   <ul>
      <li></li>
      <li></li>
       <li></li>
      <li></li>
      <li></li>
  </ul>
  
</div>

</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>评分</title>
<style>
*{margin:0px; padding:0px;}
#box{    width:600px; 
        height:115px; 
        background:pink;
        margin:0 auto;}
#box ul {list-style:none;}
#box ul li{ background:url(1.jpg) no-repeat; width:120px; height:115px;
float:left; cursor:pointer;}
#box ul li.active{background:url(1.jpg) 0px -115px;}
#display{ width:600px; height:25px; text-align:center; 
margin:0px auto;}
</style>
<script>
window.onload=function(){
  var myDisplay=document.getElementById("display"); 
  var myLI=document.getElementsByTagName("li");
  var py=["非常差","差","一般","好","非常好",];
  for(var i=0;i<myLI.length;i++){
    myLI[i].index=i;//用来指出哪一个
    myLI[i].onmouseover=function(){
    for(var j=0;j<this.index+1;j++)
      myLI[j].className="active";
    }
      myLI[i].onmouseout=function(){
      for(var j=0;j<this.index+1;j++)
        myLI[j].className="";
      }
      myLI[i].onclick=function(){
        myDisplay.innerHTML="您的评分分数是："+(this.index+1)+
                "分，您的评语是："+py[this.index];
      }
  }
}
    </script>

</head>

<body>
<div id="box">
   <ul>
      <li></li>
      <li></li>
       <li></li>
      <li></li>
      <li></li>
  </ul>
  
</div>
<div id="display"></span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<style>
span{ color:red; font-weight:bold; display:none;}
</style>
<script>
window.onload=function(){
  var myTestBtn=document.getElementById("sub");
  var myTestRegex=document.getElementsByClassName("regex");
  var myError=document.getElementsByClassName("error");
  for(i=0;i<myTestRegex.length;i++){
      myTestRegex[i].index=i;
      myTestRegex[i].onblur=function(){
         switch(this.index){
           case 0:var reg=/^\w{6,15}$/;
                 spaceError="用户名不能为空！";
                 regError="用户名在6~15位之间";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
           case 1:var reg=/^\w{6,15}$/;
                 spaceError="密码不能为空！";
                 regError="密码6~15字母、数字、下划线";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
           case 2:
                 if(myTestRegex[2].value==""){
                    myError[2].style.display="inline";
                      myError[2].innerHTML="确认密码不能为空！";
                        myTestRegex[2].data=1;
                 }
                 if(myTestRegex[1].value!=myTestRegex[2].value){
                    myError[2].style.display="inline";
                      myError[2].innerHTML="密码与确认密码不相同！";
                        myTestRegex[2].data=1;
                  }
                 break;
                  /* alert(myTestRegex[1].value+myTestRegex[2].value)
                var reg=/^\w{6,15}$/;
                 if(myTestRegex[1].value!=myTestRegex[2].value) {
                    myError[index].style.display="inline";
                      myError[index].innerHTML="密码与确认密码不相同！";
                      this.data=1;
                 }
                 spaceError="确认密码不能为空！";
                 regError="确认密码6~15字母、数字、下划线";
                    testResult(this,reg,this.index,spaceError,regError)
                 if(myTestRegex[1].value!=myTestRegex[2].value) {
                    myError[index].style.display="inline";
                      myError[index].innerHTML="密码与确认密码不相同！";
                      this.data=1;
                    
                 }*/
                 
                 
               
           case 3:var reg=/^1[3578]\d{9}$/;
                    spaceError="手机号必须输入不能为空！";
                 regError="手机必须是以13，15，17，18开头的11位数字";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
           case 4:var reg=/^\w+@(\w+[.])*\w+$/;
                 spaceError="邮箱不能为空！";
                 regError="邮箱不符合规则";
                    testResult(this,reg,this.index,spaceError,regError)
                 break;
         }
      }
  }
  
  function testResult(object,reg,index,spaceError,regError){
        var value=object.value;
        var result=reg.test(value);
        if(value==""){
          myError[index].style.display="inline";
          myError[index].innerHTML=spaceError;
          object.data=1;
        } else if(result){
            myError[index].style.display="none";
            object.data=0;
          }else{
           myError[index].style.display="inline";
           myError[index].innerHTML=regError;
           object.data=1;
          }
    }
  myTestBtn.onclick=function(){
     total=0;
     for(i=0;i<myTestRegex.length;i++){
         myTestRegex[i].onblur();
         total+=myTestRegex[i].data;
     }
     if(total>0)    return false;    
        else return true;
  }
}
</script>
</head>

<body>
<form action="reg.php" method="get">
  用&nbsp;&nbsp;户&nbsp;&nbsp;名:
  <input type="text" id="username" name="username" class="regex">
  <span class="error">用户名在6~15位之间</span>
  <br>
  密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
  <input type="password" id="pwd" name="pwd"  class="regex">
  <span class="error"></span>
  <br>
  确认密码:
  <input type="password" id="c_pwd" name="c_pwd" class="regex">
  <span class="error"></span>
  <br>
  手&nbsp;&nbsp;机&nbsp;&nbsp;号:
  <input type="text" id="mobile" name="mobile" class="regex">
  <span class="error"></span>
  <br>
  邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:
  <input type="text" id="email" name="email" class="regex">
  <span class="error"></span>
  <br>

  <input type="submit" id="sub" value="注册">
</form>
</body>
</html>