Bootstrap4 定製驗證(Custom Validation) 的簡單實現方法

若是你只是想知道如何boostrap form validation, 請直接點 正文 和 官方文檔

0. 關於Flask技術棧渲染網頁上的一些碎碎念 a.k.a React定向安利

一般遇到一些小的頁面需求，咱們會用bootstrap搞定。 不過，做爲最基礎的表單，用戶輸入的合法驗證也是須要的。

過去，我一般的作法是用flask-wtf + flask-bootstrap，配合 quick_form宏在服務器端生成表單。到目前爲止這依然是一個可行 的選項，並且依舊很方便，主要問題在於flask-bootstrap並不支持 bootstrap4, 同時wtf的文檔太醜, 一旦須要進一步customize, 你就要 開始看源碼, 而後去試jinja宏裏提供的各類參數, 最後 fight against it。。真是慘痛回憶，想起來就頭疼。。

下圖是我看flask-bootstrap 源碼 時看到的@_@

於此同時，當下python技術棧的同志們的javascript水平也逐漸開始6了起來，那麼，直接擼前端是在正常不過的事情了。我因工做需求 搓了一個小React Native APP以後對React的技術棧就愈加的喜好起來,先無論前端各個框架的佈道師們是如何定義React, Angular, Vue的, 就我這種玩票型選手而言React的JSX就是一個簡潔靈活的界面描述語言,全部Jinja能幹的事情都能幹，並且能幹的漂亮得多。 日常，我每次寫html+css都是很蛋疼的，有了JSX我就能夠All in JavaScript.
最重要的，python的靈活性和react的靈活性相近, 也讓我有十足的親近感。

1. Bootstrap Validation 的原理

首先, 表單的驗證按官網分爲"client side"和"server side",
官網對"client side"的理解爲經過遊覽器的Validation API去驗證字段的合法性, 而後在form標籤上加上"was-validated"來展現validation內容。

對於這種方法，一個簡單的例子以下:

<form> <!-- 請嘗試更換爲 <form class="was-validated">  -->
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" required />
        <div class="invalid-feedback">這是一個invalid-feedback</div>
    </div>
</form>

 

本例子中給input元素加上了required屬性, 所以遊覽器會主動地驗證這個地方有沒有填值。

當form標籤沒加was-validated,那麼就不會去觸發:invalid和:valid這兩個css僞元素,
input外邊框不會變成紅色或者綠色, .invalid-feedback裏的內容是隱藏的，以下:

而後若是遊覽器加上was-validated，由於<input required>，沒填遊覽器就會主動觸發:invalid, ，以下:

填了就是:valid, 以下:

若是你須要本身定義規則來觸發:invalid和:valid元素, 那就須要不少 html5+js API的知識了, 不過，與其在html5裏的框架裏跳舞，我仍是想概念越少越好;)， 有興趣的同窗請點擊上述連接擴展學習。

 

2. 本文的推薦實現方法

因此, 終於進入了本文的主要內容: server-rendering。

長話短說, 直接在<input>標籤上掛.is-invalid和.is-valid, 不用在form上toggle .was-validated class屬性，就能顯示 該input的驗證狀態, 而且控制其相鄰.invalid-feedback元素的顯示開關。

初始代碼:

<form>
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" value="whatever"/>
    <div class="invalid-feedback">Server render invalid message</div>
  </div>
</form>

 

• <input type="text" class="form-control" value="whatever" />

   不顯示驗證狀態, 以下:
  

• <input type="text" class="form-control is-invalid" value="whatever" /> 

   顯示invalid狀態, 展現.invalid-feedback內容, 以下:
  

• <input type="text" class="form-control is-valid" value="whatever" />

    顯示valid狀態, 不展現.invalid-feedback內容, 以下:
  

OK, Get了這個知識點，那麼恭喜諸位Flask同窗已經知道如何server-rendering了。

接下來介紹一下我用react實現的一個簡單實現的Demo: Github Repo

本例採用的是controlled components, 不瞭解的這個概念的請看這裏。 同時，因爲bootstrap裏的標準form作法是把input包在.form-group裏, 這部分能夠抽象成一個Dumb組件:

import classNames from 'classnames';

function FormGroupText({label, name, type = 'text', onChange, placeholder, value, validation = {}}) {
  let id = `form-id-${name}`; // 用於label.for和input.id

  return (
    <div className="form-group">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        type={type}
        className={classNames('form-control', {'is-invalid': validation.status === false}, {'is-valid': validation.status === true})}
        name={name}
        onChange={onChange}
        placeholder={placeholder}
        value={value}
      />
      {
        validation.msg &&
        <div className="invalid-feedback">
          {validation.msg}
        </div>
      }
    </div>
  );
}

 

上述代碼中: 對函數參數語法不瞭解的同窗能夠看這裏 jsx中我推薦用classnames庫來生成className代替手動拼接,連接

form表單的組件代碼以下:

import React, {Component} from 'react';

class App extends Component {

  state = {
    email: "", username: "", password: "",
    validation: {}
  };

  onInputChange = (e) => {
    const {name, value} = e.target;
    this.setState({[name]: value});
  };

  checkValidation = () => {
    let validation = {};

    if (this.state.email === "" || !this.state.email.endsWith('foxmail.com')) {
      validation.email = {status: false, msg: '欽定必須是foxmail郵箱!'};
      return [false, validation];
    } else {
      validation.email = {status: true};
    }

    if (this.state.username === "" || this.state.username.length < 5) {
      validation.username = {status: false, msg: '用戶名字符必須大於5位'};
      return [false, validation];
    } else {
      validation.username = {status: true};
    }


    if (this.state.password === "" || this.state.password.length < 6) {
      validation.password = {status: false, msg: '密碼必須大於6位 '};
      return [false, validation];
    } else {
      validation.password = {status: true};
    }

    return [true, validation]
  };

  onSubmit = (e) => {
    e.preventDefault(); // 阻止默認的提交的頁面跳轉行爲
    e.stopPropagation();

    const [isValid, validation] = this.checkValidation();

    this.setState({validation});

    if (isValid) {
      // Do ajax jobs
    }
  };

  render() {
    const {validation} = this.state;
    return (
      <div className="container">
        <h2>Form Validation Demo</h2>
        {/* form 加上 noValidate 來阻止默認的瀏覽器的驗證tooltips*/}
        <form
          method='post'
          onSubmit={this.onSubmit}
          noValidate
        >
          <FormGroupText
            label="Email"
            type="email"
            name="email"
            value={this.state.email}
            placeholder="aweffr@foxmail.com"
            onChange={this.onInputChange}
            validation={validation.email}
          />
          <FormGroupText
            label="User Name"
            type="text"
            name="username"
            value={this.state.username}
            placeholder="aweffr"
            onChange={this.onInputChange}
            validation={validation.username}
          />
          <FormGroupText
            label="Password"
            type="password"
            name="password"
            value={this.state.password}
            placeholder="Please Input Password"
            onChange={this.onInputChange}
            validation={validation.password}
          />

          <button type="submit" className="btn btn-block btn-primary">
            Submit
          </button>
        </form>
      </div>
    );
  }
}

 

上述demo的運行效果以下:

上述代碼中:

• checkValidation方法爲具體的驗證字段的邏輯
  • 在實現上,我在每次驗證一個字段後，若是invalid就直接return，是由於以爲這樣對用戶比較友好,這樣用戶不會一提交就滿屏幕的紅色:)
  • 每一個FormGroupText組件中的status來自於表單的state.validation, 如email字段的屬性位於this.state.validation.email.status
    • status: undefined => 未驗證, className='form-control'
    • status: true => 合法, className='form-control is-valid'
    • status: false => 不合法, className='form-control is-invalid'
  • onInputChange中{[name]: value}這個語法請參考這裏
    Ctrl + F5 Computed property names (ES2015)

3. More

固然, 這個例子裏的validation實現方法仍是很粗糙的。更進一步，嚴肅的項目上咱們會去驗證某個字段是否是必須是數字，是否是隻能含有中文，是否是不能包含特殊字符，以及輸入長度驗證和密碼強度驗證。 這就要求把validation rules配置化。這方面我用過的，體驗很是好的是大哥級組件庫antd。有興趣的同窗能夠去antd表單
和它的具體實現rc-forms作進一步學習,
他們把驗證的部分解耦到了async-validator上，用起來挺順手的, 尤爲他們開發時劃分表單problem的方法和思路尤爲值得學習。

不過，至於如何上手antd，以及其官方大佬所實現的腳手架umijs，乃至react狀態管理攤開來說就又是一篇博客了。To Be Continued.