jQueryフォーム検証拡張コード(2)_jquery

1. 既存の問題
前の記事で述べたように、検証プロンプトはテキストとスタイルの 2 つの方法でプロンプト メッセージを表示することを目的としています。両方を一緒に使用できるように、新しいコンテンツと新しいコンテンツに拡張機能が作成されました。前の記事で説明した必須フィールドの検証は、Text と TextArea の 2 つのフォーム要素にのみ適用されます。新しい拡張機能では、radio と checkbox の 2 つの要素もサポートされます。

2. 検証パラメータの設計
複数の選択の考慮に基づいて、いくつかの必要なパラメータが拡張されています。
必須: かどうか。は必須、true と false、true は必須項目を表します (*)
onFocusText: フォーカスを取得するためのテキスト プロンプト
onFocusClass: フォーカス取得後のスタイル
onErrorText: 検証エラーのテキスト プロンプト
onErrorClass: 検証エラー スタイル プロンプト
onSuccessText: 検証成功テキスト プロンプト
onSuccessClass: 検証成功スタイル プロンプト
targetId: プロンプト情報要素

の ID 番号が以前のものと比較して変更されました。以前の記事からわかるように、スタイルとテキストを混合する前に、別々に分離しました。これは拡張ニーズを考慮したステップでもあります。次に、エラー メッセージ プロンプト パラメータの名前を変更しました。

3. ソースコード解析
jQuery フォーム検証拡張機能の必須項目ソースコードかどうかの検証

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

$.fn.extend({
checkRequired:function(inputArg){
//必須フィールドのみが
if(inputArg.required){
//入力ボックスであるかどうかを検証する
if($(this).is("input") || $(this).is ("textarea")){
//フォーカスプロンプトを取得します
$(this).bind("focus",function(){
//テキストが存在する場合、プロンプトのスタイルを置き換えないでください
if ($(this).val() != unknown && $(this).val() != "") {
//正しい情報テキストを表示します
addText(inputArg.targetId,inputArg.onSuccessText);
//スタイルを切り替えます
addClass(inputArg.targetId,inputArg.onSuccessClass);
//フォーカス テキストを表示します
addText(inputArg.targetId,inputArg.onFocusText);
//スタイルの切り替え
addClass(inputArg.targetId,inputArg.onFocusClass)
});
$(this).bind(" Blur",function(){
if($(this).attr("type")=="ラジオ" || $(this).attr("type ")=="チェックボックス"){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][チェック済み] ');
if(items.length>0){
addMessage(true,inputArg)
}else{
addMessage(false,inputArg); {
if($(this).val()!=未定義 && $(this).val()!=""){
addMessage(true,inputArg);
>addMessage(false,inputArg);
}
}
});
}
}
}); /
function addMessage(flag,inputArg) {
if(flag){
//正しい情報テキストを表示します
addText(inputArg.targetId,inputArg.onSuccessText)
//Switch style
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//エラーメッセージテキストを表示
addText(inputArg.targetId,inputArg.onErrorText); style
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* さまざまなタイプの入力ボックスに基づいて決定
* @param {Object} flag
* @param {Object} inputArg
*/
function addText(targetId,text){
if( text==未定義){
text=" ";
}
$("#" targetId).html(" " " text);
}
/**
* 表示するテキスト情報をターゲットコントロールに追加
* @param {Object} targetId ターゲットコントロール ID
* @param {Object} text 表示するテキスト情報
*/
function addClass(targetId,className){
if(className!=unknown && className!=""){
$("#" targetId).removeClass(); "#" targetId).addClass(className);
}
}


jQuery を使用したことのある人なら誰でも、jQuery が非常に拡張しやすいフレームワークであることを知っています。コアライブラリを拡張します。このフォームバリデーションは、この拡張機能に基づいて拡張されています。
ここではコードの再利用性の問題も考慮されており、共通のコードが分離されているため、最終的なコードが大幅に削減されます。
jQuery フォーム検証拡張機能には共通メソッドの抽出が必要です




コードをコピー


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

/**
* 根据输入框的不同类型来判断
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//显示正确信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切换样式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//显示错误信息文本
addText(inputArg.targetId,inputArg.onErrorText);
//切换样式
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* 给目标控件添加显示的文本信息
* @param {Object} targetId 目标控件id
* @param {Object} text 需要显示的文本信息
*/
function addText(targetId,text){
if(text==undefined){
text="";
}
$("#"+targetId).html("        "+text);
}
/**
* 切换样式
* @param {Object} targetId 目标控件id
* @param {Object} className 显示的样式名称
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}
/code]
每次不同的验证都会涉及到 添加文本消息，表单元素的不同添加文本消息，和样式的替换，于是分离出来上面三个公用方法。
在源码中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 这句是比较重要的一句，因为它涉及到了验证元素的扩展。

四. 使用例子

文本框测试样图

 输入文本框获得焦点提示

 输入文本框失去焦点错误提示

 输入文本验证正确提示

 

radio 测试样图

  

checkbox 测试样图

  checkbox 验证失败提示

 checkbox 验证成功提示
测试代码
[code]

姓名:

性别:

男    
女

爱好:

aa    
bb   
aa    
bb   

这里不多说了，文章持续更新中！有问题进一步做修改中.......