zoukankan      html  css  js  c++  java
  • 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')
          }
        })
      
    • 跳转到指定的错误位置

      由于使用了该库的样式,导致获取错误信息的位置scrollTop0,主要原因是对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=radiotype=checkbox 校验,若是需要显示错误信息,目前尽可能使用第二种方式,不然提示信息会默认选择第一个作为错误信息显示,这样明显有问题,只有采用第二种才可以进行自定义错误信息显示

    总结

    • code
    • 版本不同会有细微区别(特别是checkbox,校验时,明明选择了,还是变红,需要更换版本)link
  • 相关阅读:
    让Div居中的方法
    创建对象的几种方式
    [Gport]2014移动互联网趋势——100名CEO的一句话解读
    专访腾讯云陈磊:微信云助力企业转型把握O2O时代价值
    Head First Python 学习笔记(第二章:分享你的代码)
    Head First Python 学习笔记(第一章:使用IDLE来帮助学习Python)
    《写给大家看的设计书》学习笔记
    用TreeView以递归显示选择磁盘上文件夹中全部文件夹和文件
    WebBrowser实现:自动填充网页上的用户名和密码并点击登录按钮
    C#调用免费天气预报WebService
  • 原文地址:https://www.cnblogs.com/sinosaurus/p/11772976.html
Copyright © 2011-2022 走看看