20160831_jeffrey - silenceuncrio/diary GitHub Wiki

• 0915 - lanst.html form input 格式檢查
• 0945 - AngularJS Form Validation
• 1025 - 8 Example(s) of Ng-Pattern
• 1130 - RegExp
• 1150 - CGI 裡如果也需要比對 regular expression 的話
• 1520 - commit - Improve lanst.html
• 1550 - bootstrap form validation done right in angularjs/)
• 1715 - 為了 wanst.html 有跟原設計者 john 聊了一下

今天從 lanst.html form input 的 格式檢查開始作

參考 w3schools.com 的 AngularJS Form Validation

AngularJS Form Validation 的 Custom Validation 感覺十分強大

不過還是找找有沒有現成的

8 Example(s) of Ng-Pattern 提供了 ng-pattern 的範例

回頭熟悉一下最基礎的 RegExp

CGI 裡如果也需要比對 regular expression 的話

只要 #include <regex.h> 就好了

參考 regex.h - regular-expression-matching types

Revision: 472
Author: jeffrey
Date: 2016年8月31日 下午 03:19:00
Message:
Improve lanst.html
- add form validation
- add `.has-error` Bootstrap validation styles while the input field content is not valid
- disable apply button while the form content is not valid

----
Modified : /fsl-release-bsp/proscend/prosrc/www/lanst.html

果然要有實際的案子讓我累積這些實戰經驗

commit 的 log 就是實際的戰鬥成果

'lanst.html' 的部分成果歸功於 bootstrap form validation done right in angularjs/)

不過這邊

<form name="userForm">
  <div class="form-group" ng-class="{ 'has-error': userForm.email.$invalid }" >
    <input type="email" class="form-control" name="email" ng-model="user.email" required />
  </div>
</form>

對於 ngClass 的使用需要參考 ngClass - directive in module ng

主要是對於 ng-class="expression" 的描述

Expression to eval.
The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values.
In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

在這個例子我們使用的是 a map of class names to boolean values

如果不了解這個的話會相當的困擾

為了 wanst.html 有跟原設計者 john 聊了一下

icos_common.h

#define WAN_DEV_NUM 3 // Physical wan device number, 

module_wanst.h

//One of Wan device instance
typedef struct
{
    char            szIfName[16]; /* Wan static module will preset this field */
    int             active;                
    int             mtu;                    
    unsigned int    ipv4_addr;              
    unsigned int    ipv4_mask;
    unsigned int    gwv4_addr;
} sWanStIf;

typedef struct
{
    sWanStIf        ifidx[WAN_DEV_NUM]; //Support Multiple Wan Device
} sWanStConfig;

依據 sWanStConfig 結構跟 john 看著 wanst.html 有了以下的暫時結論

• 我忘了加上 active field
• 如果 szIfName 是空字串的話那就不用讓使用者作修改
• szIfName 在 web 畫面不用顯示出來

為了做這些修改就樣在原始的資料上作加工

我想保留一些彈性能讓我在開發的時候動態的決定要不要顯示原始的資訊

來熟悉一下 AngularJS 的 $location service