如何在JQuery中编写简化的通用验证逻辑和规则 [英] How to write simplified and generic validation logics and rules in JQuery

问题描述

我知道Internet上有大量信息可以验证JavaScript和JQuery中的表单.但是我很想写我自己的.基本上我想学习这个东西.

I know there are tons of information out there over internet to validate form in JavaScript and JQuery. But I’m interested to write my own. Basically I want to learn this thing.

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

So here is my validation script I have written and its working fine.

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. 我想添加验证规则，例如长度，电子邮件验证， 日期验证等.

1. add validation message
2. More generic way to handle for every form.
3. And I want to add validation rule, like length, email validation, date validation etc.

现在如何实现这些目标?

Now how can I achieve these?

推荐答案

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

I did something similar to this, except that I wrote my rules in PHP since you need a server-side backup. When the PHP generates the form, it also generates some simple client-side validation that looks like this:

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

这篇关于如何在JQuery中编写简化的通用验证逻辑和规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！