semantic-ui的表单使用

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