便利なjqueryフォーム検証プラグイン

今回は、便利な jquery フォーム検証プラグインを紹介します。jquery フォーム検証プラグインを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

jqueryのvalidateプラグイン

前提知識: デフォルトの検証ルール

使い方: jquery.js、jquery.validate.min.js、validate-config.jsを順番に導入します

例:

$.extend($.validator.messages, {    required: "这是必填字段",    ip: "输入格式不正确",    number: '请输入数字',    max: "输入超过了最大值",    min: "输入小于最小值",    minlength: $.validator.format( "输入字符不能少于 {0} 个." ),    maxlength: $.validator.format( "输入字符不能多于 {0} 个." ),    mask: "网关不可达",    remote: "该名称已存在",    equalTo: "两次输入密码不匹配",    notEqualTo: "新密码不能与原始密码相同",    pw  : "必须包含数字、英文字母、特殊字符, 并且大于等于8位"});
$.validator.addMethod("ip",function(value,element,params){    var ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;    if( value === '' ) {        return true;
    }    return ipReg.test( value );
},"输入格式不正确");

コード1行14行目から14行目までは検証情報の追加、16行目以降は検証関数のカスタマイズであり、戻り値がfalseの場合は上記の検証情報が表示されます。

上記のコードは
検証ルール の定義であり、次のコードは検証を開始します:

<script src="xx/jquery.js"></script><script src="xx/jquery.validate.min.js"></script><script src="xx/validate-config.js"></script><script>
    var $form = $("#form");
    $form.validate( {        rules: {            id: {                required: true
            },            ip: {                required: true,                ip: true //这个不是写错，而是说明了要使用自定义（$.validator.addMethod）的ip验证方法
            },            username: {                required: true
            },            pw: {                required: true
            }
        },        ignore: &#39;.ignore&#39;
    } );
    $form.on("submit", function () {      if ( $form.valid() ) { //$form.valid返回值为true验证通过
        //验证通过执行的代码
      }
    })</script>

6 行目から 23 行目は使用するルールを説明し、25 行目はフォーム送信のイベント監視です。

注: dom 構造内の検証情報の位置を変更したい場合は、次のように errorPlacement を使用してください:

$('.lock-form-register').validate({    rules: {        username: {            required: true,            username: true

        },        password: {            required: true,            pw: true           
        },        confirmpwd : {            required : true,            equalTo : "#pw",             pw: true
        }
    },    errorPlacement: function(error, element) {        //element是被验证的元素，error是包含错误信息的label标签
    }
});

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、お支払いください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

関連書籍:

CSSのclearfixの原理の簡単な紹介

JSの一般的な関数の概要

HTMLのボックスモデルの詳細な説明

以上が便利なjqueryフォーム検証プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。