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

Question

我知道互联网上有大量信息可以验证 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 {
        }
    }

我想实现几件事——

1. 添加验证消息
2. 处理每种形式的更通用的方法。
3. 我想添加验证规则，如长度、电子邮件验证、日期验证等。

现在我怎样才能实现这些？

Answer 1

使用jQuery 验证。它可以直接完成您想要的一切。

Answer 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>

Answer 3

创建一个简单的函数：

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