ホームページ > 記事 > ウェブフロントエンド > jQuery_jquery に基づいて bootstrapValidator でグローバル検証を実装する
BootstrapValidator は、Boostrap v3 専用のフォーム検査 jQuery プラグインです。一般的に使用される多くの検査機能を実装でき、拡張が容易で、中国語もサポートしています。ブートストラップ ユーザーは、そのまま使用できます。
プレフィックス:
jQuery、ブートストラップ、ブートストラップバリデーターの紹介
問題の説明:
このプロジェクトでは、すべてのフォーム入力ボックスに & 記号を入力することはできません。ブートストラップで利用できる方法が見つからなかったので、自分で行う必要がありました
考え:
正規表現を使用します。
1 つ目は、入力ボックスに独自の定期検証がある場合、それについて心配する必要がないということです (一般的に、定期検証は入力を厳密に制御するために使用されます)。正規表現がない場合は、& の正規ルールを入力できないことを追加する必要があります。
上記 2 つの状況に応じて、bootstrapValidator 初期化関数をオーバーロードし、初期化設定を修正する必要があります。最後に、元の bootstrapValidator 関数を復元します (この手順は必要です。元の bootstrapValidator 関数には独自の関連要素が多数あり、失われることはありません)。
実装:
/*add chenhua 2015.10.16 重写bootstrapValidator方法?给每一个验证项都添加禁止输入"&"符号*/ $(function(){ //保存原始的bootstrapValidator var overwrite = $.fn.bootstrapValidator; //重载bootstrapValidator $.fn.bootstrapValidator = function(options){ //恢复原来的bootstrapValidator,因为其加了很多数据是不能丢失的 $.fn.bootstrapValidator = overwrite; //这里有两种做法,第一种是直接修改arguments内容,使其包含不能输入&的验证,然后调用即可; //第二种是先使用arguments来初始化,然后使用调用bootstrapValidator的函数来给非正则表达式验证的项添加不能输入&的验证 //这里我们使用了第二中。 var validtor = overwrite.apply(this,arguments); if($.type(arguments[0]) == "object"){ var vtor = this.data("bootstrapValidator"), //过滤出输入框表单项 fileds = this.find("input[name][type='hidden'],input[name][type='password'],input[name][type='text'],textarea[name]").not(":disabled,[type='hidden']"); fileds.each(function(){ //本身没有正则验证才添加不能输入&的验证 if(!vtor.getOptions($(this).attr('name'),'regexp','regexp')){ vtor.addField($(this).attr('name'), { validators: { regexp: { regexp: /^[^&]*$/, message: "不能包含&字符" } } }) } }) } return validtor; } })