hooyantsing's Blog

第58次课程

字数统计: 977阅读时长: 5 min
2019/09/19

源辰74班

第58次课程

09.19.2019

内容

正则表达式[廖彦]

1.下拉框联动、多选框联动

login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="省市.js"></script>
<script>
    function init(){
       var cbxLikeArr =  document.getElementsByName("like");
       for(var  i=0;i<cbxLikeArr.length;i++){
           cbxLikeArr[i].onclick =  selectLike;
       }
    }
    
    function selectLike(){
       var checkedCount = 0;
       var cbxLikeArr =  document.getElementsByName("like");
       for(var  i=0;i<cbxLikeArr.length;i++){
           checkedCount +=  cbxLikeArr[i].checked ? 1 : 0;
       }
       var cbxAll =  document.getElementsByName("likeAll")[0];
       cbxAll.checked = checkedCount ==  cbxLikeArr.length;
    }
    
    function selectAll(){
       var cbxAll = event.srcElement;
       var cbxLikeArr =  document.getElementsByName("like");
       for(var  i=0;i<cbxLikeArr.length;i++){
           cbxLikeArr[i].checked =  cbxAll.checked;
       }
    }
    
    function selectProvince(){
       var sltProvince = event.srcElement;
       var sltCity =  document.getElementById("sltCity");
       sltCity.innerHTML = "<option>--请选择市--</option>";
       if(sltProvince.selectedIndex > 0){
           var cityArr =  citys[sltProvince.selectedIndex - 1];
           for(var  i=0;i<cityArr.length;i++){
               var option = new  Option(cityArr[i],cityArr[i],false);
               sltCity.appendChild(option);
           }
       }
    }
</script>
</head>
<body onload="init()">
    <form action="main.html">
       用户名:<input type="text"  name="username">

       密码:<input type="password"  name="password">

       学历:
       <input type="radio" name="edu">大专
       <input type="radio" name="edu">本科
       <input type="radio" name="edu">研究生
       

       爱好:
       <input type="checkbox"  name="likeAll" onclick="selectAll()">全部
       <input type="checkbox" name="like"  >篮球
       <input type="checkbox" name="like"  >读书
       <input type="checkbox" name="like"  >手游
       

       籍贯:
       <select onchange =  "selectProvince()">
           <option>--请选择省--</option>
           <script>
               for(var  i=0;i<provinces.length;i++){
                  document.write("<option>"+provinces[i]+"</option>")
               }
           </script>
       </select>
       <select id="sltCity">
           <option>--请选择市--</option>
       </select>
       

       <input type="button" value="普通按钮">
       <input type="reset" value="重置按钮">
       <input type="submit" value="提交按钮">
    </form>
</body>
</html>

2.正则表达式

**2019-09-25_192625.png

**

详解:

e64fba75a124ddff2dda9fa31a8be6e3.png

re = /格式/模式

格式:

c37c3f0c87b8b36fe3a38ba3fb999aca.png

模式:

b5c3fe3560036b06c937c7dd1ab2d284.png

使用方法:

1
2
3
4
5
6
7
var str = "a Bat cat,fAt baT faT";
    
var reg = /bat/gi;//<-简约写法     标准写法:var ret = new RegExp("bat","gi");
    
while((a=reg.exec(str))!=null){
   alert(a);
}

g:检索整条字符串

i:不区分大小写

1
2
3
4
5
6
7
var str = "a Bat cat,fAt baT faT";
    
var reg = /[bc]at/gi;
    
while((a=reg.exec(str))!=null){
   alert(a);
}

[]:可选集合,满足其中任意一个字符均可

1
2
3
4
5
6
7
var str = "a Bat cat,fAt baT faT";
    
var reg = /[^bc]at/gi;
    
while((a=reg.exec(str))!=null){
   alert(a);
}

[^]:不可选集合,排除其中任意一个字符的其他字符均可

1
2
3
4
5
6
7
var str = "a Bat cat,fAt baT faT";
    
var reg = /[a-c]at/gi;
    
while((a=reg.exec(str))!=null){
   alert(a);
}

[a-c]:范围,满足a到c其中任意一个字符均可

^:行起始符

$:行截至符

用于规定字符串长度

7b460169037fcb0a2ed709f23c99ef50.png

1030a622e26b5aa9bcf3440592243ff0.png

案例:

regExp.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function validate(){
       var txtPhone =  document.getElementById("phone");
       var txtEmail =  document.getElementById("email");
       
       if(txtPhone.value == ""){
           alert("请填写电话号码!");
           return false;
       }
       if(txtEmail.value == ""){
           alert("请填写邮箱地址!");
           return false;
       }
       
       var re = /^1\d{10}$/;
       if(re.test(txtPhone.value) ==  false){
           alert("请填写正确的电话号码!");
           return false;
       }
       re = /\w+@\w+\.\w+/;
       if(re.test(txtEmail.value) ==  false){
           alert("请填写正确的邮箱地址!");
           return false;
       }
       return true;
    }
</script>
</head>
<body>
       <form action="main.html"  onsubmit="return validate()">
           电话:<input name="phone"  id="phone">

           密码:<input name="email"  id="email">

           <input type="submit" value="提交按钮">
       </form>
</body>
</html>
CATALOG