如何在 JQuery 中编写简化和通用的验证逻辑和规则答案

【问题标题】：How to write simplified and generic validation logics and rules in JQuery如何在 JQuery 中编写简化和通用的验证逻辑和规则
【发布时间】：2012-10-09 12:54:00
【问题描述】：

我知道互联网上有大量信息可以验证 JavaScript 和 JQuery 中的表单。但我有兴趣自己写。基本上我想学这个东西。

这是我编写的验证脚本，它工作正常。

function validate() {

        var firstName = jQuery("#firstName").val();
        var lastName = jQuery("#lastName").val();
        var dateOfBirthy = jQuery().val("dateOfBirth");

        if (firstName.length == 0) {
            addRemoveValidationCSSclass("#firstName", false);
        } else {
            addRemoveValidationCSSclass("#firstName", true);
        }

        if (lastName.length == 0) {
            addRemoveValidationCSSclass("#lastName", false);
        } else {
            addRemoveValidationCSSclass("#lastName", true);
        }
    }

    function addRemoveValidationCSSclass(inputField, isValid) {
        var div = jQuery(inputField).parents("div.control-group");
        if (isValid == false) {
            div.removeClass("success");
            div.addClass("error");
        } else if (isValid == true) {
            div.removeClass("error");
            div.addClass("success");
        } else {
        }
    }

我想实现几件事--

添加验证消息
更通用的处理每个表单的方式。
我想添加验证规则，如长度、电子邮件验证、日期验证等。

现在我该如何实现这些？

【问题讨论】：

标签： javascript jquery twitter-bootstrap validation

【解决方案1】：

使用jQuery validate。开箱即用，它可以满足您的所有需求。

【讨论】：

使用 JQuery 验证时出现问题。这里我需要提交表单进行验证。但我不想提交表格。我只是想确保表单字段是有效的，按下一个简单的按钮或任何东西。链接，就像我说的，我想以学习的方式。谢谢顺便说一句。
您可以检查表单是否有效，而无需在 jQuery 中提交验证：if ($("form").valid()) { ... }

【解决方案2】：

我做了类似的事情，除了我在PHP 中写了我的规则，因为你需要一个服务器端备份。当 PHP 生成表单时，它还会生成一些简单的客户端验证，如下所示：

<!-- html field -->
<label for="first">
  First Name: <input type="text" name="first" id="first">
  <span id="first_message"></span>
</label>

那么脚本是这样的：

<script>
  var formValid = true;
  var fieldValid = true;

  // Check first name
  fieldValid = doRequiredCheck("first");
  if (!fieldValid) {formValid = false};
  fieldValid = doCheckLength("first", 25);
  if (!fieldValid) {formValid = false};

  function doRequiredCheck(id) {
    var el = document.getElementById(id);
    var box = document.getElementById(id + "_message";
    if (el.value === "") {
      box.innerHTML = "**REQUIRED**";
    }
  }

  function doCheckLength(id,len) {
    var el = document.getElementById(id);
    var box = document.getElementById(id + "_message";
    if (el.value.length > len) {
      box.innerHTML = "Too long";
    }
  }
</script>

【讨论】：

【解决方案3】：

创建一个简单的函数：

function validations(day, hour, tap1, tap2, employed){
if( day== "" | hour== "" | tap1== "" | tap2== "" | employed== "" ){
    return false;
} else {
    return true;
}

【讨论】：