この記事を読む前に、フォーム検証の入力範囲検証がオリジナルに基づいて書き直されている最初の 2 つの記事を読むことができます。 入力内容の長さが一致しない場合 フォーカスプロンプトの質問を取得 チェックボックス グループの 1 つがフォーカスされます 選択肢が多すぎます (6)。検証テスト コード
(1). 入力範囲検証の問題
2 番目の記事で述べた問題は、元の検証にも存在します。もちろん、これらの問題のいくつかは今回のリライトでも解決されています。 radio、checkbox、select 要素の検証も追加されました。もちろん、時間の検証はまだ解決されていないので、続報で追加されます！
(2). 検証パラメータの設計
onEmptyText: 入力内容が空の場合にテキストを表示します
onEmptyClass :入力内容が空の場合に表示されるスタイル
onSuccessText: 検証が成功したときに表示されるテキスト
onSuccessClass: 検証が成功したときに表示されるスタイル
onErrorText:検証失敗時に表示されるテキスト
onErrorClass: 検証失敗時に表示されるスタイル
onFocusText: フォーカス取得時に表示されるテキスト
onFocusClass: フォーカス取得時に表示されるスタイルフォーカスは
dataType: 入力データ型
min: 入力最小値
max: 入力最大値
targetId: 表示する要素 IDプロンプト メッセージ
書き換えられた部分は、フォーム検証をより柔軟に操作できるように、プロンプト テキストとスタイルを個別に分離することです。
リライトされた記事はテキスト、数値、日付の 3 つのデータ形式をサポートし、ラジオ、チェックボックス、選択の検証も更新されました。
ラジオ、チェックボックス、選択の検証は選択されているかどうかのみを検証し、ここでの選択はブラーイベントの影響を受けないため、ここでの変更イベントを使用して検証することをお勧めします。
(3).jQueryチェック入力項目の範囲ソースコード解析
/**
* onEmptyText: 入力内容が空の場合に表示されるテキスト* onEmptyClass: 入力内容が空の場合の表示スタイル
* onSuccessText: 検証が成功した場合に表示されるテキスト
* onSuccessClass: 表示されるスタイル検証成功時
* onErrorText: 検証失敗時に表示されるテキスト
* onErrorClass: 検証失敗時に表示されるスタイル
* onFocusText: フォーカス取得時に表示されるテキスト
* onFocusClass: 表示されるスタイルフォーカス取得時
* dataType: 入力データ型
* min: 入力最小値
* max: 入力最大値
* targetId: プロンプトメッセージを表示する要素 ID
* @param {オブジェクト} inputArg
* /
$.fn.extend({
checkRange:function(inputArg){
//フォーカス イベントをバインド
$(this).bind("focus",function(){
var flag=true;
if($(this).is("input") || $(this).is("textarea")){
if($(this).attr(" type")=="ラジオ" || $(this).attr("type")=="checkbox"){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][checked]');
if(items.length>0){
flag=false;
}else {
if($(this).val()!=未定義 && $(this).val()!=""){
flag=false;
}
}else{ //選択にはフォーカス イベントがないため、変更イベントに変更する必要があります
}
if (flag) {
//フォーカスされたテキストを表示します
addText(inputArg.targetId , inputArg.onFocusText);
//スタイルの切り替え
addClass(inputArg.targetId, inputArg.onFocusClass)
});フォーカス喪失イベントをバインドします
$(this).bind("blur",function(){
var flag=false;
if($(this).is("input") || $ (this).is ("textarea")){
if($(this).attr("type")=="ラジオ" || $(this).attr("type")=="チェックボックス"){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][checked]');
if(items!= 未定義 && items.length>=inputArg.min && items.length
}
}else{
var value=$( this).val( );
if (value == unknown || value == "") {
//フォーカスされたテキストを表示
addText(inputArg.targetId,inputArg.onEmptyText); >//スイッチスタイル
addClass(inputArg.targetId,inputArg.onEmptyClass);
}else {
switch (inputArg.dataType) {
case "text":
if(value. length < inputArg.min || value.length >= inputArg.max){
flag=true; >case "数値" :
if (isNaN(value)) {
flag = false;
}
else {
if (value
flag = false;
}
else {
flag = true;
}
case "日付":
break;
}
}
}
}else{ //select
}
if(flag){
//フォーカスされたテキストを表示
addText(inputArg .targetId, inputArg.onSuccessText);
//スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onSuccessClass);else{
//フォーカスされたテキストを表示します
addText(inputArg .targetId, inputArg.onErrorText);
//スタイルの切り替え
addClass(inputArg.targetId, inputArg.onErrorClass)
//選択ボックスを選択 Select イベント
if ($(this).is("select")) {
$(this).bind("change", function(){
var items=$ (this).find ("option:selected");
if(items!=unknown && items.length>=inputArg.min && items.length
addText( inputArg.targetId, inputArg.onSuccessText);
// スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onSuccessClass);
// フォーカスされたテキストを表示します
addText( inputArg.targetId, inputArg.onErrorText);
//スタイルの切り替え
addClass(inputArg.targetId, inputArg.onErrorClass);
}
}
});
ここでより重要なのは、Select 要素が複数の選択項目を選択できることです。 radio、checkbox、select は選択範囲の長さだけを検証し、テキストや日付は検証しません。これはこの記事の重要な部分です。ソースコードもリファクタリングされ、多くの共通部分が抽出され、コード量が大幅に削減されるとともに、jQuery フォーム検証拡張機能 (2) の一部のメソッドも使用されます。
(4). 抽出された共通コード分析
2 番目の記事のパブリック メソッド
/**
* さまざまなタイプの入力ボックスに基づいて決定
* @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 = =unknown){
text="";
}
$("#" targetId).html(" " " text);
}
/**
* スタイルの切り替え
* @param {Object} targetId ターゲット コントロール ID
* @param {Object} className 表示スタイル名
*/
function addClass(targetId,className){
if(className!=unknown && className!=""){
$("#" targetId).removeClass(); " targetId).addClass(className);
}
}
このコードは主にテキスト プロンプトとスタイルの問題を追加するために使用されます。
選択要素の検証コード
//選択ボックス選択イベント
if ($(this).is("select")) {
$(this).bind( " Change", function(){
var items=$(this).find("option:selected");
if(items!=unknown && items.length>=inputArg.min && items.length< ; inputArg.max){
//フォーカスされたテキストを表示します
addText(inputArg.targetId, inputArg.onSuccessText)
//スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onSuccessClass); 🎜>}else{
//フォーカスされたテキストを表示します
addText(inputArg.targetId, inputArg.onErrorText);
//スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onErrorClass); 🎜>}
});
}
このコードは、選択ボックス要素を検証するために使用され、複数選択の検証をサポートします。
(5) 検証使用例
テキストボックスの入力確認
入力された文字列が現在の要件を満たしているかどうかを確認するプロンプト 
テキストが入力されていない場合に検証します 
番号の検証
入力された数値は範囲を満たしていません 
検証成功
チェックボックスの確認
データを満たすように選択してください
数量以上を選択 
複数選択の場合
検証成功
コードをコピーします コードは次のとおりです:
<頭>
男
女
aa
bb
aa
bb
