2八、Python以前端組件學習

時間 2019-11-29

原文原文鏈接

1、JS正則表達式

　　在聊前端組件的時候，咱們先學習一下以前遺漏的一個知識點，正則。咱們知道正則的做用有2點，一、提取符合正則規則的數據，二、對數據進行正則校驗。咱們在學習python的時候是用的re模塊 http://www.cnblogs.com/win0211/p/8427824.html，對於前端的數據校驗js也有本身的正則。css

　　JS中的正則只有2個方法。html

　　一、test方法：判斷字符串是否符合規則的正則表達式（主要用戶對數據進行校驗）前端

JS中申明一個正則表達式的變量的語法爲：rep = /\d+/;該正則表達式表示必須包含數字，所以，rep.test('1221dsdsds')返回爲true，rep.test('dsfsfd')返回false。java

然而有時候咱們想校驗某個值必須只能是數字，這時候的正則表達式就應該寫成這樣：rep = /^\d+$/，以^開頭$結尾，表示徹底匹配，這與rep=/\d+/是徹底不同的。python

　　二、exec 獲取符合正則表達式的數據（主要用於爬數據）jquery

若是咱們想要從一串數據中找到符合某一個規則的字符串，就要用到exec()的方法，例若有這樣一個字符串：JavaScript is more fun than Java or JavaBeans!若是咱們想從這個字符串中匹配出全部包含java的字符串，則使用正則表達式：pattern = /\bJava\w*\b/g;演示以下：正則表達式

咱們發現進行在進行查找的時候並無一次性查找出來，而是一次查找一個，與Python的迭代器有點像。下面的例子是一個使用JS的正則進行登陸的數據校驗，但咱們要知道的是，前端的數據校驗只能攔截"本分"的用戶，對於噁心用戶而言，後臺的校驗才能奏效。數組

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .error{
  8             color: red;
  9             background: #ffc9de;
 10 
 11         }
 12         .hide{
 13             display: none;
 14         }
 15     </style>
 16 </head>
 17 <body>
 18     <form id="f" action="2.html" method="post">
 19         <div style="border: 1px solid darkgray;width: 600px;">
 20             <table>
 21                 <tr>
 22                     <td><label for="userId">用戶名：</label></td>
 23                     <td><input id='userId' require = 'true' Filed='userName' range="4-15" type="text"/></td>
 24                     <td><span class="error"></span></td>
 25                 </tr>
 26                 <tr>
 27                     <td><label for="mobileId">手機號：</label></td>
 28                     <td><input id="mobileId" require = 'true' type="text"/></td>
 29                     <td><span class="error"></span></td>
 30                 </tr>
 31                 <tr>
 32                     <td><label  for="pwdId">密碼：</label></td>
 33                     <td><input id="pwdId" require = 'true' type="password"/></td>
 34                     <td><span class="error"></span></td>
 35                 </tr>
 36                 <tr>
 37                     <td><label for="conPwdId">確認密碼：</label></td>
 38                     <td><input id="conPwdId" require = 'true' type="password"/></td>
 39                     <td><span class="error"></span></td>
 40                 </tr>
 41                 <tr>
 42                     <td colspan="3" style="text-align: center;height: 50px"><input type="submit"/></td>
 43                 </tr>
 44             </table>
 45         </div>
 46     </form>
 47 
 48 <script src='jquery-3.3.1.js'></script>
 49 
 50 <script>
 51     $(function () {
 52         $('#f :submit').bind("click",function () {
 53             var flag = true;
 54             $('#f :text,#f :password').each(function () {
 55                 var require = $(this).attr('require');
 56                 if(require){           //須要校驗時
 57                     var id = $(this).attr('id');
 58                     var text = $(this).val().trim();
 59                     var span = $(this).parent().next().find('span');
 60                     console.log(span);
 61                     console.log(id);
 62                     if(text.length>0){   //非空
 63                         if(id=='userId'){  //用戶名
 64                         var ranges = $(this).attr('range').split('-');
 65                         console.log(text.length);
 66                         if(text.length>=ranges[0]&&text.length<=ranges[1]){
 67                             span.addClass('hide');
 68                         }else{
 69                             span.removeClass('hide');
 70                             span.text('範圍4-14');
 71                             flag = false;
 72                             return false;
 73                             }
 74                         }
 75 
 76                         if(id=='mobileId'){//手機號校驗
 77                             var reg = /^1[3|4|5|7|8]\d{9}$/;
 78                             if(reg.test(text)){
 79                                 span.addClass('hide');
 80                             }else{
 81                                 span.removeClass('hide');
 82                                 span.text('輸入手機號');
 83                                 flag = false;
 84                                 return false;
 85                             }
 86                         }
 87 
 88                         if(id=='pwdId'){  //密碼
 89                             var reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,12})$/;
 90                             if(reg.test(text)){
 91                                 span.addClass('hide');
 92                             }else{
 93                                 span.removeClass('hide');
 94                                 span.text('密碼6-12位字母和數組的混合');
 95                                 flag = false;
 96                                 return false;
 97                             }
 98                         }
 99                     }
100                     else {
101                         span.removeClass('hide');
102                         span.text('*不可爲空');
103                         flag = false;
104                     }
105 
106 
107                 }
108                 else {
109                     $(this).nextSibling().removeClass('hide');
110                     $(this).nextSibling().text('*不可爲空');
111                     flag = false;
112                     return false;
113                 }
114             });
115             return flag;
116         });
117     });
118 </script>
119 </body>
120 </html>

View Code

2、前端組件學習

　　學了這麼久的前端，是否是忽然有一種莫名的傷感，由於咱們發現即便一個簡單的登陸界面，咱們可能都要寫很久，這不是咱們想要的生活，既然不想要，那就丟棄它。而組件的做用就是爲了讓咱們省去繁瑣的coding，他們提供給咱們大量的素材，足以知足咱們正常的需求，而咱們只須要稍微的瞭解一下其使用方法就行了。這裏咱們介紹三個組件：EasyUI，jQueryUI，BootStrap。ide

一、EasyUI的中文地址：http://www.jeasyui.net/post

咱們把其對應的js和css文件下載下來，而後放到咱們本身的項目就能夠使用了。固然咱們要記得在咱們本身的項目中引用響應的css和js文件。咱們拿着他的例子使用就行了。

二、咱們再聊一個BootStrap，這個是目前比較主流的組件，地址爲：http://www.bootcss.com/，這塊的東西不知如何描述，說白了一句話，把別人的寫好的東西拿過來直接用，前提是：要導入人家的組件。具體各個模塊的的使用就須要看別人的網站的規則了。