# 表單元件 > 做專案的時候會遇到一個比較頭疼的問題，一個大表單裡面有好多控制元件，一個一個做設定太麻煩，更頭疼的是，需求還總在變化，一會多選、一會單選、一會下拉的，變來變去的煩死寶寶了。 那麼怎麼解決這個問題呢？我們可以做一個元件來搞定這些煩人的事情。我們使用Vue.js基於原生HTML來做一套表單控制元件！ 前端不管是哪種框架、類庫，其基礎都是HTML、CSS和JavaScript，不管用什麼方式寫專案，我們都有必要先了解一下基礎知識。所以呢我們先來看看HTML5的表單和表單元素都有哪些屬性以及功能。 ## HTML5原生的表單和表單元素 　　要想做好表單元件，必須先知道HTML5裡面的表單和表單元素都有哪些屬性，以及屬性的效果和作用，否則的話可能折騰半天才發現，原來HTML5已經自帶了這個功能！ 　　比如要實現這樣一個功能：文字框只能輸入數字，然後要加上兩個按鈕，按一個數值+1，按另一個數值-1。以前要寫js程式碼實現，現在只需要把type改成number就可以了。而且可以對輸入的文字做攔截，非數字根本輸入不進去，這樣就不用我們自己再去寫程式碼實現了。所以磨刀不誤砍柴工，我們先來整理一下，表單和表單屬性都有哪些屬性。 ### 表單屬性  　　首先是表單（<form>）的屬性，<form>的屬性主要是對錶單元素做一個統一設定，比如表單裡的元素是否需要自動完成的功能，以及提交的時候是否需要做驗證等。如果某個表單元素不符合這個統一設定的話，可以給表單元素單獨設定屬性進行說明。這樣就更靈活和方便了。 　　其他的就是通過submit按鈕對錶單進行一些控制的屬性了。不過這些都是針對表單提交的，我們現在基本都是ajax，所以這些屬性基本都用不上了。 ### 表單元素的分類 　　表單元素都有哪些？說到分類就有點頭疼，<intut>一開始理解是文字類的，輸入嘛，結果現實卻很豐滿，提交按鈕也用這個，還有單選和多選也是這個input。多行文字反倒不是這個了，而是單獨的一個。不過不管那麼多了，還是從使用的角度來分類：文字框類和選擇類。 　　<intut>的type增加了一些新的型別，在PC機的瀏覽器裡面看，區分不是很大，但是到了手機瀏覽器裡面，區分就比較大了，主要是可以控制開啟的輸入法的預設模式。比如number，開啟輸入法之後，直接就是數字方式，這個就很人性化，方便使用者操作。 　　我們先看一下分類：  #### HTML5新增特性 　　新增的特性（好吧也不算新了，都好多年了），主要是對文字框的增強，增加了一些型別以及輔助功能，比如增加了一個備選框（<datalist>）的功能，這個還是比較實用的吧。  ### 在手機網頁裡的展現效果 　　表單元素在PC瀏覽器裡是什麼樣子的，大家很容易看到，那麼在手機瀏覽器裡是什麼樣子的呢？先看一下表單整體效果：  　　注意看那幾個帶下三角的，那個不是下拉列表框，而是日期相關的，可以選擇日期時間等。具體效果我們一個一個看。 1. 單行文字type="text" 　　還是老樣子的文字框，也是使用最多的表單元素。還是原來的樣子，不貼圖了。 2. 多行文字<textarea > </textarea> 　　一般會被富文字編輯器代替。還是不貼圖了。 3. 密碼 type="password" 　　這個就不一樣了，系統不同表現也不同，比如某系統會變成系統特定的輸入法，而不是使用者設定的輸入法，並且不讓截圖，所以我只好拍照片了。  4. 日期 type="date" 　　手機瀏覽器裡面，如何方便的輸入日期？很簡單，只需要設定type=”date”就可以了，至於效果如何嗎，就要看手機系統、版本、瀏覽器、輸入法的了。我手頭測試裝置很少，不能全面測試，舉一個作為例子，大家看一下效果圖：  5. 日期時間 type="datetime-local" 　　這個不僅可以選擇日期，還可以選擇時間。不過要注意type="datetime"是不行的（各大瀏覽器都不支援），要用type="datetime-local"才行。不多說了，看圖。  6. 時間 type="time" 　　單獨選擇時間的。  7. 月份 type="month" 　　選擇年和月的，不是隻有月份。  8. 周 type="week" 　　同理，也是選擇年和周，一年內第多少周。  9. 上傳檔案和圖片 type="file" 　　上傳功能，有一個特性，可以呼叫手機攝像頭（後攝）拍照，然後還可以訪問拍下來的照片，於是就產生了一種功能，掃碼二維碼。在網上找了半天，已經有測試成功的了。以前以為手機瀏覽器無法掃二維碼呢，現在看來也是可以的。悄悄的透露一下地址：https://blog.csdn.net/yisuowushinian/article/details/50548742  10. 選擇顏色 type="color" 　　可以呼叫系統的調色盤，選擇顏色，不過對於我這樣沒有藝術細胞的人，只能是瞎點。   11. 數字 type="number" 　　這個首先可以設定輸入法為數字狀態，不用再從中文改成數字了，省去使用者的一個步驟，有些版本還可以限制使用者更換狀態。想輸入英文、漢字是沒戲了，不過還是有點小問題，因為小數點、正負號、e都屬於合法字元，所以可以輸入，但是卻沒有判斷數量和位置。 　　比如小數點可以輸入n個，+-號可以任意位置輸入。這就有點鬱悶了。還有科學計數法的e，這個我都忽略了，看到能輸入e想了半天才想起來想的很周到，但是我輸入eeee，也是可以的。既然都做了限制，為啥不順便限制一下數量呢？  12. 電話號碼 type="tel" 　　這個嘛，有些版本會設定輸入法為數字狀態，有些版本就沒啥效果了，如果電話號裡面只有數字的話，建議用number的方式。  13. 電子郵件 type="email" 　　這個也基本沒啥效果。輸入法應該出現@、 .com、 163.com 這類的快捷輸入的，可是沒有發現。不知道其他系統或者輸入法有沒有。  14. 網址 type="url" 　　可以設定輸入法為英文狀態，但是沒有出現http:// 、.com、.cn、www 這類的快捷輸入。  15. 滑塊 type="range" 　　這個好像以前就有，只是不常用。不貼圖了，也沒啥彈出效果，直接拽就好。 16. 查詢 type="search" 　　這個唯一特點就是輸入資訊後，右側可以出現一個“X”，按一下就會清空文字框。  17. datalist 　　這個是給文字框提供一個像下拉列表框那樣的備選項，還是比較實用的，只是有一個小問題，他自帶過濾功能，比如輸入 a 那麼只會保留a開頭的備選項，其他的 就都消失了。如果輸入了資訊只會，想換成其他備選項的話，就需要先清空才行，否則其他選項是不會出現了。不過好在我們有search，還記得他有什麼功能嗎？那個x。好了這兩個似乎是絕配了。  ## Vue元件的基礎知識 　　表單這一塊為啥要做成元件呢？因為要複用呀。一個表單裡面有很多很多文字框、下拉列表框，一個專案又有很多很多的表單？如果一個一個的設定屬性，是不是太麻煩。如果需求變化了，要先找到這個*.vue，然後再去修改對應的屬性。好麻煩的說。如果做成元件，不僅僅可以達到複用的效果，還可以做到業務需求和程式碼的分離！ ### 元件之hello word 　　先做一個簡單的元件看看元件到底是啥樣子的。下面是官網的例子（加了一個props），我們來分析一下。 ```javascript Vue.component('button-counter', { props:["value"], data: function() { return { count: 0 } }, template: ` You clicked me {{ count }} times.{{value}}` }); new Vue({ el: '#components-demo' }); ``` ```html ``` 　　首先使用Vue.component('button-counter', {}) 註冊一個元件。第一個引數就是元件的名稱，後面的引數是元件的實現程式碼，其中包括屬性（props）、內部變數（data）、模板（template）、方法（methods）等。其實元件和vue的例項還是很像的，最明顯的就是多了個屬性（props）和模板。 　　屬性（props）是把元件外部的資料傳遞到元件內部，是一個很基礎的資料傳遞方式。可以傳遞的資料型別也沒有限制。數字、文字、物件都可以。 　　模板呢，就是元件內部的結構，編寫方式和vue的例項是很像的。這裡有個主意的地方，一開始我沒注意看，“template:”後面跟的是啥？不是單引號哦，而是鍵盤左上角esc鍵下面的那個。這個符號終於派上用場了。是不是一直沒按過？ 　　用這個符號框起來的可以直接換行，這樣就不用一行一行的“+’”了。 　　頁面裡使用的方式來引用，相當於我們自己定義了一個dom。當然這個dom是需要vue來解析的，沒有vue解析的話瀏覽器是不會識別。執行的時候也是沒有的，直接就是我們寫的模板（繫結資料後）的內容。 　　data使用了function的形式，這個是在元件複用的時候區分多個元件的內部資料的。如果不用function的形式，複用的多個元件，將會共用同一個data值。 　　然後就是做一個vue的例項，對div進行託管。 　　表單是使用率最高的一個地方了，專案再小也要有個表單，那麼如何更好的做好表單呢？我們思路就是————依賴注入。這個可不是sql注入攻擊，大家不要弄混淆了。那麼如何實現呢？讓我們一一分析。 ### 元件的特點和優勢 　　我們為啥要做表單元件呢？首先要看看元件的優勢了，優勢都有哪些呢？封裝和複用、切換表單元素的形式、適配各種UI。 1. 複用和封裝 　　等等，原生的表單元素不是也可以複用嗎？為啥還要弄個元件？這個就要做一個對比了。用原生的方式做一個下拉列表框是啥樣的呢？ ```html ``` 　　要寫好幾行太麻煩了，如果封裝一下，各種設定由元件內部解決，外部傳引數就可以了，那麼是不是可以很方便呢？ 　　不管多複雜的表單元素，一行搞定，其他的交給元件內部處理。 2. 可以隨意切換“形態” > 經理說，這個下拉列表框改成單選的形式吧，這樣使用者選著方便。 　　於是我們只好改成這樣： ```html 男性 女性 ``` > 過兩天經理又說了：哎呀，還是下拉列表框好看，你再改回去吧。 　　。。。。。。 　　真的嗎？算了，經理說啥就是啥。看在工資的份上我忍！ 　　經理的要求必須做到，沒有討論的餘地。那麼怎麼辦呢？只能改自己了。當然不是翻來覆去的手敲，而是做成元件！ 　　比如：複選改單選，單選改下拉列表框。通過表單元素元件，改一下就可搞定。 3. 介面卡 　　現在vue有好多好多UI元件，用哪個好呢？現在我們可以基於原生html封裝一個表單控制元件，那麼以後呢？是不是可以針對其他UI元件封裝一個表單元素控制元件呢？然後只要能夠保證介面不變，那麼我們依賴這個元件寫的程式碼就不需要改變。 　　最終要實現——換UI就換UI，不影響業務邏輯的程式碼。 　　現在看看寫表單元件是不是很有必要了呢？ ### 元件的雙向繫結 　　對於表單元素，還有一個需要注意的地方，那就是資料的雙向繫結！我們先來個簡單的練練手，對 input 封裝一下。 ```javascript Vue.component('my-input', { props:["value"], template: `` }); var form = new Vue({ el: '#components-demo', data:{ formValue:{ v1:'22' } } }); ``` ```html

{{formValue.v1}} ``` 　　先看一下頁面裡的使用方法，是不是很熟悉的味道，熟悉的v-model，熟悉的大括號。 　　然後再看元件內部實現。 　　首先定義一個屬性（props）value，用於接收元件外面傳遞的資料，然後模板裡面要做兩件事情：接收引數、返回使用者輸入的資料。 　　v-model是一個語法糖，外面可以直接用，但是元件內部就不能直接用了，必須拆成兩塊才行：一個是 :value給文字框賦值；另一個是監聽input事件（程式碼第五行），然後使用$emit向元件外部傳遞值。$emit有兩個引數，第一個引數是外部監聽的事件，第二個引數（含後面的引數）是要傳遞出去的數值。 　　可能大家看著有點暈，兩個input是咋回事，我們來改變一下，就都明白了。 `@change="$emit('event1',Date.now())" ` 　　模板里加入這樣一行。change是文字框的原生change事件，這裡必須用原生的，不能用自定義的。 `@change是讓vue監聽這個事件。` 　　$emit 是向元件外面傳遞訊息，第一個引數event1，是外部vue監聽的事件，這個可以自定義，寫啥都行。 　　第二個引數是要傳遞的值，這裡Date.now()是當前時間，寫$event.target.value 的話，就是文字框的值。也就是說，寫啥都行，都可以傳遞出去。 `` ```javascript methods:{ fun:function(data) { alert(data); } } ``` 　　外部監聽自定義event1事件，然後呼叫methods裡的方法fun。 　　如果理解了，那麼元件的訊息傳遞算是基本掌握了。 ## 表單元素元件 1. 需要哪些屬性 　　表單元素元件需要設定多少屬性呢？這就是苦力活了，既然把input封裝進來了，那麼他的原生屬性都應該能夠支援，就是說要在外部可以設定。那麼怎麼辦呢，如果一個個傳遞那還不如用原生的呢，所以我們設定一個物件屬性，直接傳遞一個物件過來，這樣就簡單了。 　　熟悉了表單元素的屬性之後，我們可以定義一個json來儲存這些屬性： ```javascript c1:{ //輔助 controlId: '150', // 編號，區別同一個表單裡的其他控制元件 controlType: 101, // 用型別編號表示type colName: '姓名', //中文名稱 isClear: false, //isClear 連續新增時是否恢復預設值 //通用 disabled: false, // 是否禁用 required: true, //必填 pattern: '', //用正則做驗證。 tabIndex:0, // tab 鍵順序 class:'cssTxt input_t1', title: '', //提示資訊 //多行文字 rows:5, //行數 cols:100, //列數 //文字框類 name:'', value: '', placeholder: '請輸入姓名', readonly: false, //只讀 size: 10, // 字元寬度 maxlength: 20, //最大字元數 autocomplete: 'on', //off min: 1, // 最小值 max: 100, // 最大值 step: 1, // 步長 multiple: false, //是否可以有多個值，用於上傳檔案 listKey:'browsers', //備選文字標識 //選擇類和備選文字的選項 list: [{ "id": "1", "name": "北京", "check": false } , { id: '2', name: '上海', check: false }, { id: '3', name: '廣州', check: false } ] } ``` 　　因為json的結構可以非常靈活的組合，所以這裡設計一個大而全的結構，把所有需要的屬性都放在一起，使用的時候，可以根據元素型別靈活取捨。 　　看到這裡大家可能想，這樣太複雜了，還不如直接使用原生的呢。大家先別急，看完下面這三點然後在下結論。 - 不是所有型別都需要這些屬性，每一個型別用到的並不多。 - 可以寫一個輔助工具來生成這個json，並不需要我們手擼程式碼。 - 可以根據文件自動生成這個json。 　　比如純文字框（type=”text”）可以簡化為： ```javascript colName:{ controlId: 'colName', //ColumnID controlType: 116, class:'cssTxt input_t1', placeholder: '請填寫標題', size: 30, maxlength: 50 } ``` 　　這樣是不是簡單多了呢？其實最簡單的設定只需要 controlType 即可，其他的都可以不設定，但是也就意味著只能用預設的文字框，沒有辦法進行其他的設定。總之還是要看你要對錶單進行多少設定。 ### 文字框類的表單元素元件 　　說了這麼多，還沒看到程式碼，是不是等不急了呢？其實程式碼也沒啥好說的，就是用了最笨的方法，一點一點設定屬性。 ```javascript Vue.component('my-input', { props:["value","meta"], data:function(){ return { type:{ //把編號變成文字的形式 100:'textarea', //多行文字框 101:'text', //單行文字框 102:'password', //密碼 103:'date', //日期 //其他略。。。。。。 } } }, methods:{ //text textInput:function(event, meta){ var returnValue = event.target.value; //新增自己的監聽事件。本來想寫在一起的，但是不好用，只好分開了。 //vue的回撥 this.$emit('input',returnValue); }, textChange:function(event, meta){ var returnValue = event.target.value; //新增自己的監聽事件 this.$emit('change', returnValue,event.target, meta); } }, template: ` 100 && meta.controlType<130 "> }); ``` 1. 屬性 　　value用於雙向繫結，這個要單獨設定，其他的屬性統統放在meta裡面。這樣介面就固定了，以後需要新的屬性也不用修改介面。 2. 內部變數 　　這個是為了做個替換，因為外部設定的是型別編號，而不是型別名稱，所以內部需要做一個替換，這樣瀏覽器才能識別。 　　那麼為啥用編號，而不直接用瀏覽器支援的型別呢？因為有些型別要做兩種用途，比如file上傳檔案和上傳圖片。兩種方式要做個區分的，比如上傳圖片，可以做個圖片預覽，圖片處理等功能，上傳檔案的話，就沒有這些了。所以要做個編號加以區分。另外像多行文字框和下拉列表框用的不是input，沒有type。 3. 模板 　　這裡就很笨了，用v-if根據controlType做判斷，是哪種控制元件就渲染對應的模板。然後把屬性一一繫結上就可以了。 　　然後就是事件的繫結。因為使用者輸入內容後，要通知上層呼叫者，所以需要加個事件返回使用者輸入值。第一個input是給Vue準備的，加上這個才能實現Vue的雙向繫結。 　　那麼第二個事件是幹啥的？有的時候我們自己需要知道使用者的輸入操作，依據輸入做些操作，比如聯動下拉列表框。我們要知道第一個下拉列表框的change，然後設定第二個下拉列表框。這個時候就需要我們自己的事件通知。一開始想在一個函式裡通知兩個上層事件的，但是沒有成功。所以只好分開了。Emmm，也許可以改成資料驅動的方式，這個還沒太想好。 4. 方法 　　寫了兩個方法，一個是返回給Vue的，實現資料雙向繫結。另一個是給我們自己用的。 ### 選擇類的表單元素元件 　　選擇類指的是多選組（checkbox）、單選組（radio）、複選框（checkbox）以及下拉列表框。 ```javascript Vue.component('my-input', { props:["value","meta"], methods:{ //select selectChange:function(event, meta){ var returnValue = ''; var items = event.target.selectedOptions; //選中項的集合 var arr = []; for (var i=0;i {{item.name}} {{item.name}} {{item.name}} ` }); ``` 1. 模板 　　還是老辦法，用v-if判斷渲染哪個模板，然後還是一個一個賦值，然後選項有一個迴圈，v-for一下就可以了。這裡的選項格式和文字框的備選項格式採用了相同的設定。這樣統一一下比較方便。 2. 方法 　　每類控制元件都做一個方法，對應不同的取值方式。不知道有沒有更好的方式，現在用的比較麻煩，期待更好的方法。如果發現了肯定會更新的。 　　還有個返回值型別的問題，我是習慣返回字串的形式，比如1,2,3 。而不是陣列。因為資料庫裡儲存的是字串而不是陣列。當然這塊應該能夠靈活一些，打算加一個返回值型別的設定。 ## 輔助工具 　　這麼複雜的json要怎麼弄？不會告訴我要手擼吧！當然不是，我這麼懶怎麼能手寫呢，當然是弄個工具來輔助了。 　　輔助工具的思路，首先確定要哪種型別的表單元素，然後根據型別顯示需要設定的屬性，然後就可以點點點了（當然有些屬性需要打幾個字），就可以生成json檔案，同時還可以預覽效果。 　　這個只是第一步哦，後面的還會有根據文件生成的輔助工具。 　　文件在哪裡？做專案總會有個資料庫文件吧，文件會描述都有啥表，啥欄位。會介紹一下欄位名稱、欄位型別、欄位大小吧。這樣我們就可以根據這些資訊設定預設的json了。然後不能預設的再點點點一下就可以了。 　　這個輔助工具就是用的這個表單元素元件寫的，也算是一個實際應用，程式碼比較多，就不貼了。感興趣的話，看下面開源介紹。  ## 開源 　　原始碼下載：[Vue表單元件](https://github.com/naturefwvue) 　　線上演示：[Vue表單元件線上演示](https://naturefwvue.github.io/form/formHelp.html) 　　這裡是表單元素元件原始碼和demo，還有那個輔助工具。 　　另外會保持持續更新的，畢竟現在還只是初步學習vue實現的也只是簡單的功能。 　　下圖是輔助工具的頁面，首先選擇型別，然後預留會有變化，然後按照下面的屬性選擇即可，同時預覽也會有對應的變化。 最後感謝大家的支援！ ![感謝感謝]

相關推薦

從後端到前端之Vue（六）表單元件

# 表單元件 > 做專案的時候會遇到一個比較頭疼的問題，一個大表單裡面有好多控制元件，一個一個做設定太麻煩，更頭疼的是，需求還總在變化，一會多選、一會單選、一會下拉的，變來變去的煩死寶寶了。 那麼怎麼解決這個問題呢？我們可以做一個元件來搞定這些煩人的事情。我們使用Vue.js基於原生HTML來做一套表單

從後端到前端之Vue（一）寫個表格試試水

  目錄：   1、指令碼式開發. 2、工程化開發 3、工程化和指令碼的區別 4、來個table試試水 4,1、目標 4.2、思路 4.3、設計與編碼 4.4、效果 5、業務分離 6、功能拓展——個性化設定    

從後端到前端之Vue（二）寫個tab試試水

  　　上一篇寫了一下table，然後要寫什麼呢？當然是tab了。動態建立一個tab，裡面放一個table，這樣一個後臺管理的基本功能（之一）就出來了。 　　好吧，這裡其實只是試試水，感受一下vue的資料驅動可以怎麼玩，通過一個個例項學習一下vue的各個知識點。這裡要看看方法和css如何設定。

從後端到前端之Vue（三）小結以及一顆真實的大樹

　　上一篇寫了一下tab，下面整理一下用過的知識點，本想按照官網的文件，整理一下可以更清晰，結果也許是我的方法不對吧，總之更模糊了。 按照官網文件的順序整理到了表單輸入繫結之前，因為之前大致也就只涉及到這一些，另外一個原因就是整理的有點頭暈暈。 先展示一下成果吧。Emmm，好吧，很懷疑自己的歸納總結的能力

從後端到前端之Vue（四）小試牛刀——真實專案的應用（樹、tab、資料列表和分頁）

  　　學以致用嘛，學了這麼多，在真實專案裡面怎麼應用呢？帶著問題去學習才是最快的學習方式。還是以前的那個專案，前後端分離，現在把前端換成vue的，暫時採用指令碼化的方式，然後在嘗試工程化的方式。 　　現在先實現功能節點（樹）、動態tab、資料列表、分頁這幾個主要功能。在前面幾章裡面程式碼都已經

從後端到前端之Vue（五）小試路由

  　　一開始我還以為vue的路由只能用在工程化的專案裡面呢，然後研究了一下才發現，在指令碼化裡面也是可以用的。其實呢不管在哪裡用，把原理研究明白就對了。   一、 官網demo 　　這裡不得不吐槽一下官網，寫的不清不楚的，在哪裡使用都沒有說清楚，幾行程式碼一句話就輕飄飄的交代完事

前端編程提高之旅（十）----表單驗證插件與cookie插件

turn require 屬性 單選 method str 使用 art 存儲 實際項目開發中與用戶交互的常見手法就是採用表單的形式。取得用戶註冊、登錄等信息。而當用戶註冊或登錄後又須要記住用戶的登錄狀態。這就涉及到經常使用的兩個操作：表單驗證與cookie

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht

從零開始學 Web 之 HTML（三）表單

大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、表格 1

前端框架Vue（8）——子父元件的傳參通訊

  父子間的通訊傳值是 vue 中的一個重要的內容和掌握點。   *vue2.0 推薦使用 vuex,全域性進行狀態管理。（後面再講）   首先講一下遇到的 需求背景： 解釋一下：   元件之間的關係： <div id="app">

redux-form V.7.4.2學習筆記（六）表單同步校驗技術

組成 單獨 將在 error 應用 種類型 fine ror 客戶 一、簡介 redux-form V.7.4.2提供了兩種方法可以為表單提供同步客戶端校驗支持。 第一種是為整個redux-form提供校驗函數，該函數接受一個以表單中所有值組成的對象作為參數並返回一個帶有所

spring boot學習（六）---表單驗證

表單驗證 1.表單驗證 修改 StuController中getAdd方法 @RequestMapping(method=RequestMethod.POST) public String getAdd(@Valid Stu stu,Bindi

Flutter學習筆記（13）--表單元件

如需轉載，請註明出處：Flutter學習筆記（13）--表單元件 表單元件是個包含表單元素的區域，表單元素允許使用者輸入內容，比如：文字區域，下拉表單，單選框、複選框等，常見的應用場景有：登陸、註冊、輸入資訊等。表單裡有兩個重要的元件，一個是Form元件用來做整個表單提交使用的，另一個是TextFormFi

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用 添加 方式 執行 存在 區別 也會 地址 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：http://ww

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web

從零開始學 Web 之 ES6（六）ES6基礎語法四

實現 fine 開始 isf 原理 mat 系列教程 include number 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

前端初步預習（六）------盒子模型之border

結構 search 藍色邊框 長度 自助餐 wid 等於 搜索 mes p.p1 { margin: 0.0px 0.0px 16.5px 0.0px; text-align: justify; font: 22.0px "Trebuchet MS"; color: #00

《SpringBoot從入門到放棄》之第（六）篇——Spring Security進行安全控制

一個好的系統，幾乎都離不開許可權控制。要實現訪問許可權控制的方式有多種多樣，可以通過AOP、攔截器實現，也可以使用Shiro框架。現在研究使用Spring Security。 O的K，先建立一個無需許可權的Web小例子。（本篇部落格接著之前寫的系列，已忽略環境配置，如pom.xml 的依賴等

Vue學習之路（六）---父元件與子元件之間的資料傳遞

前面我講了基本元件的寫法，現在一起學下父元件怎樣傳遞資料到子元件，以及子元件傳遞資料到父元件的 1.父元件傳遞資料到子元件 1.1 通過props傳遞 父元件App.vue中 <component-a big-num=98></component-a&g

保證前端傳送請求方式與後端響應方式一致（五）

 1、前端的頁面傳送的請求方式應當和伺服器端需要的請求方式一致        --伺服器需要前端傳送POST請求，那前端就應該傳送POST請求，若傳送GET請求，伺服器應當提示錯誤資訊。