前端開發補充之 - 正則和插件

時間 2019-11-15

原文原文鏈接

前端開發補充之-正則和插件
1: JS正則表達式（經常使用於表單）css

定義正則表達式
/.../ 用於定義正則表達式
/.../g 全局匹配
/.../i 不區分大小寫
/.../m 多行匹配
多行匹配：
默認就是多行匹配
使用^$進行多行匹配時候使用m。

只具備2個方法
方法1：test - 判斷字符串是否符合規定的正則html

rep = /\d+/; 建立了正則表達式匹配數字
rep.test('asdfesf89sdf') #包含數字即返回true
輸出：true
rep = /^\d+$/; 開頭到結尾均爲數字
以上實例輸出返回：false前端

方法2：exec - 獲取匹配的數據
實例1：
rep = /\d+/;
str = 'w_67_h_20'
rep.exec(str)
始終輸出第一個數組：["67"]
實例2：
test = 'JavaScript is more fun than Java or JavaBeans!'
var pattern = /\bJava(\w*)\b/;#不用分組只輸出頭一個值，使用分組輸出頭一組數據。
pattern.exec(test)
分組的輸出：['JavaScript','Script']
var pattern = /\bJava\w*\b/g #使用g是全局匹配，輸出相似迭代器，匹配完成後輸出null，若是繼續將會再次從新匹配
未分組輸出：第一個["JavaScript"]，第二個['Java']，第三個['JavaBeans'] 第四個輸出null
var pattern = /\bJava(\w*)\b/g #使用分組
分組的輸出：第一個["JavaScript","Script"]，第二個['Java',""]，第三個['JavaBeans',"Beans"] 第四個輸出nulljquery

默認事件先執行：checkbox # 當點擊時候，先打對勾，而後才輸出自定義的查看狀態true或者false
自定義先執行
a #先執行自定義的函數，而後才進行URi的跳轉
submit正則表達式

表單驗證：是爲了減小數據庫的請求，固然，若是遊覽器關閉的jsscript功能，最後仍是的經過數據庫進行驗證。數據庫

舉例：js表單驗證寫法有如下幾種，以下:bootstrap

 1 flag = true;
 2 $(form).find(':text,:password').each(function(){
 3     var name = $(this).attr('name')
 4     var label = $(this).attr('label')
 5     var val = $(this).val()
 6     var $parent = $(this).parent()
 7     var required = $(this).attr('require')
 8     if(required){  # 若是爲真，則必填
 9         if(!val||val.trim() == ''){
10             flag = false;
11             ErrorMessage($parent,label+'不能爲空')
12             return false;
13         }
14     }
15     var number = $(this).attr('number')
16     if(number){
17         if(!$.isNumeric(number)){
18             flag = false;
19             ErrorMessage($parent,label+'必須爲數字');
20             return false;
21         }
22     }
23     var mobile = $(this).attr('mobile')
24     if(mobile){
25         var reg = /^1[3|5|8]\d{9}$/;
26         if(!reg.test(val)){
27             flag = false;
28             ErrorMessage($parent,label+'格式錯誤');
29             return false;
30         }
31     }
32 })

View Code

2：前端插件模板
插件有不少，如：bootstrap,JqueryUI,EasyUI,bxslider

bootstrap （目前主流的模板，前臺和後臺通用），文件下載地址：v3.bootcss.com，包含：
- css 放置的是樣式。
引入：<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" /> 這個是加入了一些顏色
- fonts 放置的是bootstraps圖標，直接從v3.bootcss.com組件中審查元素查找代碼，而後直接複製到頁面內便可
- js 放置的js文件，引入：<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
注意：當使用插件時候，若是要修改一個樣式，css絕對生效在樣式後加：!important;
包含：
1：響應式： @media
2：圖標，字體： @font-face 根據代碼找到圖標，直接從網站的元素審查裏copy相應代碼
3：基本的使用
實例：bootstrap實例數組

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .no-radus{
 8             /*使用!important 優先級最高*/
 9             border-radius: 0 !important;
10         }
11     </style>
12   <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
13     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" />
14 
15 </head>
16 <body style="background-color:red">
17 <nav class="navbar navbar-default no-radus">
18   <div class="container-fluid">
19     <!-- Brand and toggle get grouped for better mobile display -->
20     <div class="navbar-header">
21       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
22         <span class="sr-only">Toggle navigation</span>
23         <span class="icon-bar"></span>
24         <span class="icon-bar"></span>
25         <span class="icon-bar"></span>
26       </button>
27       <a class="navbar-brand" href="#">Brand</a>
28     </div>
29 
30     <!-- Collect the nav links, forms, and other content for toggling -->
31     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
32       <ul class="nav navbar-nav">
33         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
34         <li><a href="#">Link</a></li>
35         <li class="dropdown">
36           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
37           <ul class="dropdown-menu">
38             <li><a href="#">Action</a></li>
39             <li><a href="#">Another action</a></li>
40             <li><a href="#">Something else here</a></li>
41             <li role="separator" class="divider"></li>
42             <li><a href="#">Separated link</a></li>
43             <li role="separator" class="divider"></li>
44             <li><a href="#">One more separated link</a></li>
45           </ul>
46         </li>
47       </ul>
48       <form class="navbar-form navbar-left">
49         <div class="form-group">
50           <input type="text" class="form-control" placeholder="Search">
51         </div>
52         <button type="submit" class="btn btn-default">Submit</button>
53       </form>
54       <ul class="nav navbar-nav navbar-right">
55         <li><a href="#">Link</a></li>
56         <li class="dropdown">
57           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
58           <ul class="dropdown-menu">
59             <li><a href="#">Action</a></li>
60             <li><a href="#">Another action</a></li>
61             <li><a href="#">Something else here</a></li>
62             <li role="separator" class="divider"></li>
63             <li><a href="#">Separated link</a></li>
64           </ul>
65         </li>
66       </ul>
67     </div><!-- /.navbar-collapse -->
68   </div><!-- /.container-fluid -->
69 </nav>
70 
71 
72 bootstrap圖標
73 <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
74 
75 <!-- Single button -->
76 <div class="btn-group">
77   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
78     Action <span class="caret"></span>
79   </button>
80   <ul class="dropdown-menu">
81     <li><a href="#">Action</a></li>
82     <li><a href="#">Another action</a></li>
83     <li><a href="#">Something else here</a></li>
84     <li role="separator" class="divider"></li>
85     <li><a href="#">Separated link</a></li>
86   </ul>
87 </div>
88 
89     <script src="jquery-1.12.4.min.js"></script>
90     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
91 </body>
92 </html>

View Code

注意：bootstrap的js 依賴於jquery，因此使用前須要先倒入jquery

JqueryUI，須要下載jqueryUi的包，（趨向後臺管理），基本過期。
EasyUI，須要下載包（趨向後臺管理），基本過期。
bxslider 也是一個插件。如下實現一個輪播圖
網站：http://bxslider.com/ 下載包文件
輪播圖實例：ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery library (served from Google) -->
<script src="../jquery-1.12.4.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<ul class="bxslider">
  <li><img src="1.jpg" /></li>
  <li><img src="2.jpg" /></li>
  <li><img src="3.png" /></li>
  <li><img src="4.jpg" /></li>
</ul>
<script>
        $(document).ready(function(){
        $('.bxslider').bxSlider();
        });
</script>
</body>
</html>