js フォーム検証フレームワークを自分で書く方法を段階的に教えます_js オブジェクト指向

フォーム プログラムでは、フォームを検証するためにページ上に多くの JS コードが必要です。各フィールドに入力する必要があるかどうか、
は数字のみにできるかどうか、リモート検証に Ajax が必要かどうかなど、さまざまです。
それらを 1 つずつ記述するのは非常に面倒なので、最初の目標は DSL に似たものを構築することです。
制御ステートメントの代わりに表現ステートメントを使用して検証を実装します。
第 2 に、これらを 1 つずつ記述する場合は、別の問題が発生します。ただし、この機能
により、個別の検証では多くの追加の制御コードが追加されます。多くの場合、検証は不完全になります。したがって、2 番目の目標は、検証プロセス全体を完全に
統合することです。
最終的には、必要なスケーラビリティが必要なため、ハードコードされた実装は拡張できません。
まず、フィールド検証を記述できるクラスが必要です。

コードをコピー コードは次のとおりです:

function Field(params){
this.field_id=params.fid; //検証対象のフィールドの ID
this.validators=params.val; //バリデーターオブジェクトの配列>this.on_suc=params.suc; //検証が成功したときに実行されるイベント
this.on_error=params.err; //検証が失敗したときに実行されるイベント
this.checked=false; Validation に合格するかどうか
}

次に、バリデーター オブジェクトについて説明します。次に、このクラスを拡張して、validate メソッド

コードをコピー コードは次のとおりです:

Field.prototype.validate=function(){

//各バリデータ
をループします。 (item in this .validators){
//検証成功と検証失敗のコールバック イベントをバリデータに添付します
this.set_callback(this.validators[item])
//Validate メソッドを実行しますルールに準拠しているかどうかを検証するバリデータ
if(!this.validators[item].validate(this.data())){
break; //いずれかのバリデータが失敗したら停止します
}
}
}


フィールド値を取得する別のメソッドを追加します:

コードをコピー コードは次のとおりです:

//フィールド値を取得するメソッド

Field.prototype.data=function(){
return document.getElementById(this.field_id).value ;
}


バリデーター コールバック関数を設定するメソッド set_callback は次のとおりです:

コードをコピーします コードは次のとおりです。

Field.prototype.set_callback=function(val){

var self=this; //それ以外の場合は、名前を変更します。関数のクロージャーはこの名前を上書きします
val .on_suc=function(){ //実行が成功したことを検証するメソッド
self.checked=true; //実行が成功したことを検証するフィールドを設定します
self。 on_suc(val.tips); //実行が成功したことを検証するイベントを実行します
}
val.on_error=function(){ //検証が失敗した場合に実行されるメソッド
self.checked=false; set to verify failed
self.on_error(val.tips );//検証の実行に失敗したイベント
}
}

次に見てみましょうバリデータは実際に検証処理を行うクラスであり、一般的な検証処理は長さ検証（必須検証含む）、正規表現検証、カスタム関数検証、Ajaxリモート検証に分類できるので、これらを定義します。タイプ バリデータクラス。Ajax リモート検証は便宜上 jQuery を使用します。他の
部分も便利です:





コードをコピー

コードは次のとおりです:

//長度テストのテストツール
function Len_val(min_l,max_l,tip){
this.min_v=min_l;
this.max_v=max_l;
this.tips=ヒント;
this.on_suc=null;
this.on_error=null;
}
Len_val.prototype.validate=function(fd){
if(fd.lengththis.max_v){
this.on_error();
false を返します。
}
this.on_suc();
true を返します。
}
//正则表达式验证器
function Exp_val(expression,tip){
this.exps=expression;
this.tips=ヒント;
this.on_suc=null;
this.on_error=null;
}
Exp_val.prototype.validate=function(fd){
if(!fd){
this.on_suc();
true を返します。
}
if(this.exps.test(fd)){
this.on_suc();
true を返します。
}else{
this.on_error();
false を返します。
}
}
//远程验证器
function Remote_val(url,tip){
this.p_url=url;
this.tips=ヒント;
this.on_suc=null;
this.on_error=null;
}
Remote_val.prototype.validate=function(fd){
var self=this;
$.post(this.p_url,{f:fd},
function(data){
if(data.rs){
self.on_suc();
return;
}else{
self.on_error();
}
},"json"
);
false を返します。
}
//自定义関数数验证器
function Man_val(tip,func){
this.tips=tip;
this.val_func=func;
this.on_suc=null;
this.on_error=null;
}
Man_val.prototype.validate=function(fd){
if(this.val_func(fd)){
this.on_suc();
}else{
this.on_error();
}
}

最後に私はユーザーフォームのクラスを使用して入力を行い、構築時にフィールドオブジェクトの列表を入力し、
のコントロールモジュールをオンブラーにしますイベントが検証されたパッケージャ上で

复制代代码如下:

function UserForm(items){
this.f_item=items; //ハンドル文字列验证对オブジェクト数组复制给プロパティ
for(idx=0;idxvar fc=this.get_check(this.f_item[idx] ); //获取封装後の回调イベント
$("#" this.f_item[idx].field_id).blur(fc); //コントロール上で決定
}
}
//循環ループの影響を避けるために、テストイベントのプロセッサを決定
UserForm.prototype.get_check=function(v) {
return function(){ // パッケージを返しますvalidate メソッドのイベント
v.validate();
}
}

次は、提交按钮の onclick イベントを決定するための決定方法が必要です:

复制代 代码如下:

//绑定提交イベントと要素
UserForm.prototype.set_submit=function(bid,bind){
var self=これ;
$("#" bid).click(
function(){
if(self.validate()){
bind();
}
}
);
}

ここでは UserForm の検証メソッドを示しています。以下のとおりです:

复制代次のように:

//すべてのフィールド
UserForm.prototype.validate=function(){
for(idx in this.f_item){ //循環
this.f_item[idx].validate(); //再检测一遍
if(!this.f_item[idx].checked){
return false; //如果错误就返失败，提交阻止
}
}
return true; //一都没错就は成功执行提交を返します
}

最後に使用する例子来看看怎么用：

复制代码代码如下:

.suc {background-color:#00ff00;}
.error {background-color:#ff0000;}










要注意の地域は循環中に闭包会茶几を使用し、代理人一の下に一方法を使用する必要があります

初学jsを希望しますが还不知道该做点何么怎么做的友友能有所帮助