jQueryフォーム検証拡張機能(3)_jquery-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryフォーム検証拡張機能(3)_jquery

May 16, 2016 pm 06:18 PM

フォームの検証

この記事を読む前に、フォーム検証の入力範囲検証がオリジナルに基づいて書き直されている最初の 2 つの記事を読むことができます。

(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<inputArg.max){
flag=true;
}
}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 = inputArg.max) {
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<inputArg.max){
// フォーカスされたテキストを表示します
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&lt ; inputArg.max){
//フォーカスされたテキストを表示します
addText(inputArg.targetId, inputArg.onSuccessText)
//スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onSuccessClass); 🎜>}else{
//フォーカスされたテキストを表示します
addText(inputArg.targetId, inputArg.onErrorText);
//スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onErrorClass); 🎜>}
});
}

このコードは、選択ボックス要素を検証するために使用され、複数選択の検証をサポートします。

(5) 検証使用例

テキストボックスの入力確認

入力内容の長さが一致しない場合

入力された文字列が現在の要件を満たしているかどうかを確認するプロンプト

テキストが入力されていない場合に検証します

番号の検証

フォーカスプロンプトの質問を取得

入力された数値は範囲を満たしていません

検証成功

チェックボックスの確認

チェックボックスグループの 1 つがフォーカスされます

データを満たすように選択してください

数量以上を選択

複数選択の場合

選択肢が多すぎます

検証成功

(6)。検証テストコード

コードをコピーします

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<頭>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>無題のドキュメント</title>
<link type="text/css" rel="stylesheet" href="new_file.css"/>
<script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtName").checkRange({
onFocusText:"必充填项",
onFocusClass:"notice",
targetId:"txtNameTip"、
onSuccessText:"验证成功"、
onSuccessClass:"正しい"、
onErrorText:"你真不听话、请认真充填写"、
onErrorClass:"エラー" ,
min:6,
max:12,
dataType:"text"
});
$("#rdbMan,#rdbWoman").checkRange({
onFocusText) :"必須充填项",
onFocusClass:"notice",
targetId:"txtSexTip"
});
$("#txtPass2").checkRange({
onFocusText:"必充填项",
onFocusClass:"notice",
targetId:"txtPass2Tip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真充填写",
onErrorClass:"error",
min:10,
max:60,
dataType:"text"
});
$( "#rdbMan1,#rdbWoman2,,#rdbMan3,,#rdbWoman4").checkRange({
onFocusText:"必充填项",
onFocusClass:"notice",
targetId:"txthobbyTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真充填写",
onErrorClass:"error",
min:1,
max:3,
dataType:"text"
});
$("#txtAge").checkRange({
onFocusText:"必須充填项",
onFocusClass :"notice",
targetId:"txtAgeTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"输入的范围範囲10-60",
onErrorClass:"エラー"、
min:10、
max:60、
dataType:"number"
});
$("#ddlOption").checkRange({
onFocusText:"必充填项",
onFocusClass:"notice",
targetId:"ddlOptionTip",
onSuccessText:"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真充填写",
onErrorClass:"error",
min:1,
max:2 、
dataType:"数値"
});
$("#rdbMan,#rdbWoman").checkRange({
onFocusText:"必須充填项",
onFocusClass:"notice",
targetId:"txtSexTip",
onSuccessText :"验证成功",
onSuccessClass:"correct",
onErrorText:"你真不听话，请认真充填写",
onErrorClass:"error",
min:1,
max:2,
dataType:"number"
});
});
</script>
</head>

<label>love好:</label>

<input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa
<input id="rdbWoman2" type="checkbox" name="hobby " value="hobby2" />bb
<input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa
<input id="rdbWoman4 " type="checkbox" name="hobby" value="hobby4" />bb
</span>
<span id="txthobbyTip"></span>
</p>