正文

如何使用表单验证框架让提交按钮在表单数据验证通过后才可点击

/0 浏览量
0404

在现代的Web开发中，表单验证是一个非常重要的环节，它能够确保用户输入的数据符合预定的格式和规则。而让提交按钮在表单数据验证通过后才可点击，则是一种常见的用户体验优化。以下是一些流行的前端表单验证框架，以及如何实现这一功能的详细说明。

1. jQuery Validation

jQuery Validation 是一个流行的JavaScript库，用于简化客户端表单验证。以下是使用jQuery Validation实现提交按钮验证的一个基本例子：

1.1 引入jQuery和jQuery Validation库

首先，你需要在HTML文件中引入jQuery和jQuery Validation库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>

1.2 初始化表单验证

在HTML表单中，为需要验证的元素添加相应的验证规则，并为整个表单设置验证规则：

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit" id="submitButton">提交</button>
</form>

<script>
$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      username: {
        required: true,
        minlength: 3
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名至少为3个字符"
      },
      email: {
        required: "请输入邮箱地址",
        email: "请输入有效的邮箱地址"
      }
    },
    submitHandler: function(form) {
      // 表单验证通过后的处理
      alert("表单提交成功！");
    }
  });
});
</script>

1.3 使提交按钮在验证通过后才可点击

在jQuery Validation中，可以通过监听.valid()方法来实现这一功能。以下是修改后的示例：

<script>
$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      // ...其他验证规则
    },
    messages: {
      // ...其他错误信息
    },
    submitHandler: function(form) {
      // 表单验证通过后的处理
      alert("表单提交成功！");
    }
  });

  // 使提交按钮在验证通过后才可点击
  $("#submitButton").prop("disabled", true);
  $("#myForm").on("focusin focusout keyup", ":input", function() {
    var form = $("#myForm");
    if (form.valid()) {
      $("#submitButton").prop("disabled", false);
    } else {
      $("#submitButton").prop("disabled", true);
    }
  });
});
</script>

2. Bootstrap Validator

Bootstrap Validator 是一个基于Bootstrap的客户端表单验证插件。以下是如何使用Bootstrap Validator实现相同功能的例子：

2.1 引入Bootstrap和Bootstrap Validator库

在HTML文件中引入Bootstrap和Bootstrap Validator库：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-validator@0.5.3/dist/validator.min.js"></script>

2.2 初始化表单验证

为HTML表单添加验证规则：

<form id="myForm" class="needs-validation" novalidate>
  <div class="form-group">
    <label for="username">用户名:</label>
    <input type="text" class="form-control" id="username" name="username" required>
    <div class="invalid-feedback">
      请输入用户名
    </div>
  </div>
  
  <div class="form-group">
    <label for="email">邮箱:</label>
    <input type="email" class="form-control" id="email" name="email" required>
    <div class="invalid-feedback">
      请输入有效的邮箱地址
    </div>
  </div>
  
  <button type="submit" class="btn btn-primary" id="submitButton" disabled>提交</button>
</form>

<script>
$(document).ready(function() {
  $("#myForm").validator();
  
  // 监听表单验证状态，控制提交按钮的禁用状态
  $("#myForm").on('form.valid', function() {
    $("#submitButton").prop('disabled', false);
  }).on('form.invalid', function() {
    $("#submitButton").prop('disabled', true);
  });
});
</script>

总结

以上是使用jQuery Validation和Bootstrap Validator两个流行的前端表单验证框架，实现提交按钮在表单数据验证通过后才可点击的方法。在实际项目中，你可以根据自己的需求和喜好选择合适的验证框架。希望这篇文章能帮助你更好地理解这一功能。

-- 展开阅读全文 --