Semantic-UI 表单加载状态

在Web应用程序中，表单是最常见的输入和交互方式之一。Semantic-UI是一种流行的前端框架，它提供了一种易于使用和美观的表单组件。

在一些情况下，当表单提交数据并等待服务器响应时，我们需要给用户一个反馈，告诉他们请求正在进行中。这就是在表单上添加一个加载状态的场景。Semantic-UI提供了一些类来实现这个效果。

加载状态的实现

Semantic-UI提供两种类来实现加载状态： loading和disabled。

loading

在表单上添加loading类可以显示一个动态的加载指示器。这个指示器通常是一个旋转的圆圈，在表单的按钮或图标上显示。下面的代码演示如何在提交表单时加入loading类。

<form class="ui form">
  <div class="field">
    <label>Username</label>
    <input type="text" name="username">
  </div>
  <button class="ui button" type="submit">
    Submit
  </button>
</form>

<script>
  $('.ui.form')
    .form({
      fields: {
        username: 'empty'
      },
      onSuccess: function(event, fields) {
        // 防止表单自动提交
        event.preventDefault();

        $('.ui.button').addClass('loading');

        // 使用ajax提交表单
        $.ajax({
          url: 'your-api-endpoint',
          type: 'POST',
          data: fields,
          success: function(data) {
            console.log(data);
          },
          error: function() {
            console.log('error');
          },
          complete: function() {
            $('.ui.button').removeClass('loading');
          }
        });
      }
    });
</script>

在上面的代码中，我们使用Semantic-UI的表单组件来验证表单输入。在表单提交之前，我们添加了loading类来显示加载指示器。提交表单后，我们使用ajax发送请求并等待服务器响应。当请求完成时，我们从按钮上删除loading类来停止加载指示器。

disabled

在表单上添加disabled类可以防止用户多次提交表单。下面的代码演示如何在loading状态下添加disabled类。

<form class="ui form">
  <div class="field">
    <label>Username</label>
    <input type="text" name="username">
  </div>
  <button class="ui button" type="submit" disabled>
    Submit
  </button>
</form>

<script>
  $('.ui.form')
    .form({
      fields: {
        username: 'empty'
      },
      onSuccess: function(event, fields) {
        // 防止表单自动提交
        event.preventDefault();

        $('.ui.button').addClass('loading disabled');

        // 使用ajax提交表单
        $.ajax({
          url: 'your-api-endpoint',
          type: 'POST',
          data: fields,
          success: function(data) {
            console.log(data);
          },
          error: function() {
            console.log('error');
          },
          complete: function() {
            $('.ui.button').removeClass('loading disabled');
          }
        });
      }
    });
</script>

在上面的代码中，我们在表单按钮上添加了disabled类，以防止用户多次提交表单。在loading状态下，我们添加了disabled类，这样即使用户多次点击也不会提交表单。在请求完成后，我们删除loading和disabled类，以便下一次提交表单。

总结

在Semantic-UI中，我们可以使用loading和disabled类来实现表单的加载状态。这个功能可以帮助我们提升用户体验，告诉他们请求正在进行中，并防止用户多次提交表单。在实际开发中，请根据实际情况选择适合您的类。