ホームページ >ウェブフロントエンド >jsチュートリアル >FormValidate フォーム検証関数コードが更新され、download_javascript スキルで利用可能になりました
FormValidate 関数の更新
ダウンロード:
http://xiazai.jb51.net/jslib/FormValidate.rar
詳しい使用方法については、以下を参照してください:
http ://jobj.googlecode.com/svn/trunk/FormValidate/demo.html
メソッドの追加:
extend、
検証モード 4 の追加 (3 と同じですが、検証が失敗した場合) , 下向きチェックはすぐにやめましょう。モード 3 では、エラーが発生した場合、エラーが記録され、下方チェックが行われます。モード 4 では、下方チェックは行われません。
使用法:
。 。 。 。 。
。 。 。 。 。
var checkRule = [
{name:"name[0]"、required:true、min:2、max:3、msg:"名前を入力してください。長さは 2 より大きく、以下でなければなりません3"},
{name:"birthday[0]",required:false, type:"Date", msg:"生年月日はオプションです。入力する場合は、正しい日付を入力してください"},
{name:"email [0]", required:false, type:"Email", msg:"Email はオプションです。入力する場合は、正しいメール アドレスを入力してください"},
{name:"scoreA[0] ", required: true, type: "Num", min:0, max:100, msg: "中国語のスコアは必須です。0 より大きく 100 未満である必要があります。"},
{name:"scoreB [0]", required:true, type:"Num", min:0, max:100, msg:"数学的スコアは必須であり、0 より大きく 100 未満でなければなりません"},
{name:"スコアC[0]", required:true, type: "Num", min:0, max:100, msg:"英語のスコアは必須であり、0 より大きく 100 未満である必要があります"}
];
JObj.plugin("FormValidate");
var va = JObj.Plugin.FormValidate;
va.extend(document.forms[0],"ruleTpl",checkRule); 🎜>return va.validate(document.forms[0],checkRule ,4);
説明:
なぜこのように書かれているのでしょうか?
フォーム項目を動的に追加したくない場合は、va.extend という文を削除できます。ただし、フォーム項目を動的に追加した場合。 。 。新規フォーム項目は指定できません。
このように書くと、ruleTplで指定された検証ルールになります。このruleTplは任意の文字列(値ではありません)にすることができます。たとえば、ruleTplをtttに置き換える場合は、次のように記述する必要があります:
va.extend(document.forms[0],'ttt',checkRule)
ruleTpl はフォーム項目のカスタム属性として存在し、その値は checkRule の添字である必要があります。この添字が存在しない場合、この項目はデフォルトではチェックされません。それ以外の場合は、検証ルールを動的に追加するという目的を達成するために、選択した checkRule 要素をコピーします。
この関数を追加するときに、いくつかの興味深い問題が発生しました。それについて以下に説明します。
1. アドレス参照。変数 a の値を実行しないでください。次のコードの値。
var a = [{name:1}];
var tmp = a.push(a[a.length - 1]);
a[tmp - 1].name = 2 ;
a = [{name:1},{name:2}] と言う場合、実際の値は次のとおりです:
a = [{name:2},{ name: 2}];
理由は非常に単純で、プッシュされるのはオブジェクトであり、そのオブジェクトは JS のアドレス参照であるため、実際には a[tmp - 1].name = 2 になります。変更 a [0]の値が変更されました。
次の段落は非常に単純です。値を参照すれば、上記のような状況は起こりません。
var a = [1,2,3]
a.push(a[a.length - 1]);
alert(a); a.length - 1] = 4;
alert(a);
2、FF 内のフォーム項目を動的に削除します。
フォーム項目が警告なしで動的に削除された場合、form['itemName'] は削除されたフォーム項目のままになります。
このとき、parentNode も form も null ですが、parentNode == null では判定できず、関数を完成させるためには item を使わないといけないのが非常にややこしいです。 .form == null で判断する場合、次のようにします。
if (obj == unknown || obj.form == null) return null;
IE にはこの問題はありません。