0

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. そして、長さ、電子メールの検証、日付の検証などの検証ルールを追加したいと思います.

どうすればこれらを達成できますか？

4

3 に答える 3

2

jQuery 検証を使用します。箱から出してすぐに必要なすべてを実行します。

于 2012-10-09T12:57:13.590 に答える
1

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>
于 2012-10-09T13:04:42.823 に答える