semantic-ui 的表單使用

最近找了一款ui庫，jquery可以使用的。可以進行個性化定制，感覺還不錯。

現狀

簡單闡述下該ui的現狀吧，目前止步於2.4的版本，github商討了一波。大致是死掉了，很久沒有再接着更新了，留下了一些問題。接着便有人基於該庫進行繼續迭代link，贊一個

基於上述說法，個人推薦直接使用網友接着開發的，之前的功能保留，而且還在持續添加新的組件。同時歷史遺留的bug也得以解決

form使用 demo

• form表單使用，一般涉及到如下幾個
  • 校驗規則
  • 你有我無
  • 跳轉到指定的錯誤位置
  • 獲取值
  • 同一個意思涉及到多種表單類型（eg: 有其他時，輸入，於是上面的單選框就不用進行校驗)

現針對上面的一一進行處理

• 校驗規則

    $('.ui.form').form({
      on: 'blur',
      fields: {}
    })
  

  目前有兩種顯示錯誤方式

  • 當前表單下方，需要添加

      <div class="ui error message"></div>
    

  • 設置inline: true

  • 校驗規則兩種寫法

    • 簡單方法

        fields: {
          name     : 'empty',
          skills   : ['minCount[2]', 'empty'],
          terms    : 'checked'
        }
      

    • 復雜點【可以進行自定義】

        fields: {
          name: {
            identifier: 'name',
            rules: [
              {
                type   : 'empty',
                prompt : 'Please enter your name'
              }
            ]
          },
          skills: {
            identifier: 'skills',
            rules: [
              {
                type   : 'minCount[2]',
                prompt : 'Please select at least two skills'
              }
            ]
          },
          terms: {
            identifier: 'terms',
            rules: [
              {
                type   : 'checked',
                prompt : 'You must agree to the terms and conditions'
              }
            ]
          }
        }  
      

• 你有我無【動態添加校驗規則】

  目前直接通過值的判斷，來進行控制是否顯示

    $('#input').on('input', (e) => {
      const value = e.target.value
      if (value) {
        $('.ui.form').form('remove rule', 'language')
        /**
         * 有點版本還需要手動去清除樣式
         * 有些可以使用 validate field 進行單獨校驗即可
         */
      } else {
        $('.ui.form').form('add rule', 'language', {
          rules: [
            {
              type: 'checked',
              prompt: '選擇一門你喜歡的語言'
            }
          ]
        })
        $('.ui.form').form('validate field', 'language')
      }
    })
  

• 跳轉到指定的錯誤位置

  由於使用了該庫的樣式，導致獲取錯誤信息的位置scrollTop為0,主要原因是對html設置了height: 100%
  因而需要嘗試其他方式

  在onFailure中進行處理

    setTimeout(function() {
      // 獲取第一個錯誤位置
      var res = $('.field.error')[0].getBoundingClientRect()
      var top = document.scrollingElement.scrollTop + res.y
      // 此處有一個疑惑點 為何需要 -120 目前沒有深入研究
      $(document.scrollingElement).scrollTop(top - 120)
    }, 16)
  

• 獲取值
  一般的都可以通過在 onSuccess中的fields可以拿到所有name的值，但是針對checkbox多選時，一直拿到的是最后一個值，按道理是數組，多個值才對，因而需要注意其使用規范

  html

    <input type="checkbox" name="books[]" value="自傳">
  

  校驗

    books: {
      identifier: 'books[]',
      rules: [{
        type: 'checked',
        prompt: '選擇喜歡的書籍'
      }]
    }
  

  之后通過上面的fields便可以拿到值，只是需要過濾一下false情況即可

• 同一個意思涉及到多種表單類型

  類似你有我無的處理方式，只是在獲取值時，需要有一個側重點，是否是輸入了其他，上面的單選框就失效，還是怎么的。反正兩個值都可以拿到，只是在傳給后台時，稍微處理一下即可

細節處理

針對 type=radio 和 type=checkbox 校驗，若是需要顯示錯誤信息，目前盡可能使用第二種方式，不然提示信息會默認選擇第一個值作為錯誤信息顯示，這樣明顯有問題，只有采用第二種才可以進行自定義錯誤信息顯示

總結

• code
• 版本不同會有細微區別（特別是checkbox，校驗時，明明選擇了，還是變紅，需要更換版本）link