コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryフォーム検証拡張コード(1)_jquery

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-05-16 18:18:46
オリジナル
1197 人が閲覧しました

繰り返しますが、プラグインには多くの問題があります。後で 1 つずつ解決していきます。悪口を言わないでください。たくさんの良い提案や言葉をいただければ幸いです。
1. フォーム検証の基本的な状況を分析する
Web 開発のプロセスでは、さまざまな検証に遭遇します。まとめると、基本的に次のカテゴリに分類できます:
(1). 項目が必須かどうか [これは非常に基本的なことです]
(2). 入力パラメーターの範囲検証
(3) ). パラメータと別のコントロールの値の入力比較
(4). 入力パラメータの正規表現検証
2. 必須フィールドの検証
以下の状況があります。 :
(1) 入力ボックスにフォーカス プロンプトが表示されます
(2) 入力ボックスがフォーカスを失い、検証エラー プロンプトが表示されます
(3) 入力ボックスがフォーカスを失い、検証プロンプトが正しく表示されます
まず、入力ボックスが必要かどうかを判断し、次にメッセージの実際の場所を示すプロンプトが表示されます。
上記の状況に基づいて次のパラメータを決定します。
required: 必須項目であるかどうか、true と false、true は必須項目であることを意味します (*)
onFocus: フォーカスを取得するためのテキスト プロンプト ( if スタイルを指定する場合は、スタイル名の前に @ を追加します。そのため、テキスト プロンプトの最初の文字に @ を含めることはできません)
onBlur: フォーカスを失うテキスト プロンプト (スタイルを指定する場合は、スタイル名の前に @ を追加します)そのため、テキスト プロンプトの最初の文字には @ を含めることはできません) (検証失敗プロンプト)
onSucces: 検証が成功した場合のテキスト プロンプト (スタイルが指定されている場合は、スタイル名の前に @ を追加して、テキスト プロンプトの最初の文字に @ を含めることはできません) have @)
tipId: プロンプト情報の表示に使用するコントロール ID (*)
組み合わせ例: {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId: "tipid"}
注: 上記で定義されたルールの一部は実装されていない場合がありますが、後のプロセスで徐々に改善されます。

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

/**
* 入力ボックスが必須かどうかを確認します
* 入力パラメータ:
* 必須: 必須かどうか、true と false、true は必須を意味します (*)
* onFocus: フォーカスを取得するテキスト プロンプト(スタイルが指定されている場合は、スタイル名の前に @ が追加されるため、テキスト プロンプトの最初の文字に @ を含めることはできません)
* onBlur: フォーカスを失うテキスト プロンプト (スタイルが指定されている場合、@ はスタイル名の前に追加されます)スタイル名なので、テキストのプロンプトが表示されます。最初の文字に @ を含めることはできません) (検証失敗プロンプト)
* onSucces: 検証が成功した場合のテキスト プロンプト (スタイルが指定されている場合は、スタイル名の前に @ を追加します。テキスト プロンプトには @ を含めることはできません)
*tipId: プロンプト情報を表示するために使用されたコントロール ID (*) (*)
* 組み合わせ例: {required:true,onFocus:"Required",onBlur:"@error", onSuccess:"成功",tipId:"tipid"}
*/
$ .fn.extend({
checkRequired:function(inputArg){
if(inputArg.required){
if($(this).is("input") || $(this ).is ("textarea")){
//フォーカス イベントをバインドします
$(this).bind("focus",function(){
if(inputArg.onFocus!=unknown){
$("#" inputArg.tipId).html(inputArg.onFocus);
}
});
//フォーカス喪失イベントをバインドします
$(this).bind( "blur ",function(){
if($(this).val()!=未定義 && $(this).val()!=""){
$("#" inputArg.tipId ).html(inputArg.onSucces);
$("#" inputArg.tipId).html(inputArg.onBlur);
}
}); 🎜> }
}
});



使用効果とテストコード:

フォーカスを取得すると、次のプロンプト効果

フォーカスを失っても入力プロンプト効果はありません

テキストメッセージを入力すると、成功エフェクトが表示されます テスト コードは次のとおりです:


コードをコピーします コードは次のとおりです: <スクリプト言語= "JavaScript" src="jquery-1.3.2.min.js" type="text/javascript">
<スクリプト言語="JavaScript" src=" jquery-extend-1.0.js" type="text/javascript">



3. 入力パラメータの範囲検証

上記の検証と比較すると、入力値の範囲があるため、少し複雑になります。検証では次の区別が行われます。入力データ型は文字列、数値、時間で​​す。

文字列の場合は、文字列の長さを比較し、数値と時間を比較します。 (時間はまだ完璧ではありません)

比較範囲のため、間隔範囲が定義されているため、ここでさらに 2 つの属性、下限値と上限値が追加されます。

入力パラメータリスト:

onFocus: フォーカスを取得するためのテキストプロンプト (スタイルが指定されている場合は、スタイル名の前に @ を追加します。そのため、テキストプロンプトの最初の文字に @ を含めることはできません)

onEmpty : 入力項目は空のテキスト プロンプトです (スタイルが指定されている場合は、スタイル名の前に @ を追加します。そのため、テキスト プロンプトの最初の文字に @ を含めることはできません)

onSucces: テキスト検証が成功したことを示すプロンプト (スタイルが指定されている場合は、スタイル名の前に @ を追加します。そのため、テキスト プロンプトの最初の文字に @ を含めることはできません)

onBlur: フォーカスを失ったテキスト プロンプト (スタイルが指定されている場合)指定する場合は、スタイル名の前に @ を追加します。そのため、テキスト プロンプトの最初の文字に @ を含めることはできません) (検証失敗プロンプト)

dataType: データ型パラメーター (テキスト、数値、日付)

min: 入力された最小値

max: 入力された最大値

tipId: プロンプト情報の表示に使用されるコントロール ID (*)
コードをコピー コードは次のとおりです:

/**
* 入力項目の範囲を確認します
* 入力パラメータ:
* onFocus: フォーカスを取得するためのテキスト プロンプト (スタイルが指定されている場合は、スタイル名の前に @ を追加します。テキスト プロンプトには @ を含めることはできません)
* onEmpty: 入力項目が空の場合のテキスト プロンプト (スタイルが指定されている場合、スタイル名の前に @ が追加されるため、テキスト プロンプトの最初の文字に @ を含めることはできません)
* onSucces: 検証が成功したときのテキスト プロンプト (スタイルが指定されている場合、スタイル名の前に @ が追加されます。そのため、テキスト プロンプトの最初の文字に @ を含めることはできません)
* onBlur: フォーカスを失ったテキスト プロンプト(スタイルが指定されている場合は、スタイル名の前に @ を追加します。そのため、テキスト プロンプトの最初の文字に @ を含めることはできません) (検証失敗プロンプト)
* dataType : データ型パラメーター (テキスト、数値、日付)
* min : 入力された最小値
* max : 入力された最大値
*tipId : プロンプト情報の表示に使用されるコントロール ID (*)
*
*/
$.fn.extend({
checkRange :function(inputArg){
if ($(this).is("input") || $(this).is(" textarea")) {
//フォーカス バインディングを取得
$( this).bind("focus",function(){
if(inputArg.onFocus!=unknown){
$( "#" inputArg.tipId).html(inputArg.onFocus);
}
});
//フォーカス バインディングが失われました
$(this).bind("blur",function( ){
if($(this).val()==unknown || $(this).val()==""){
$("#" inputArg.tipId).html(inputArg .onEmpty);
}else{
switch(inputArg.dataType){
case "text":
if($(this).val().length>= parseInt(inputArg.min ) && $(this).val().length< parseInt(inputArg.max)) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur); }
ブレーク;
ケース "番号":
if(!isNaN($(this).val() )){
if(parseInt($(this).val())> ;parseInt(inputArg.min) && parseInt($(this).val())$("#" inputArg.tipId).html(inputArg.onSucces); 🎜>}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
}
break
case "date":
break; ;
}
}
});


入力範囲の効果とテストコード



年齢が数値であることに同意する場合

入力が合意された範囲内にありません

コードは次のとおりです: $("#txtAge").checkRange({ onFocus: "年齢は数字です", onEmpty: "空にすることはできません",

onSucces: "検証が成功しました",
onBlur :"検証に失敗しました。慎重に入力してください。"、
dataType: "number"、
min: "10"、
max: "100"、
tipId: "txtAgeTip"
}) ;


Copy code The code is as follows:

/**
* Comparison between control values
* Input parameters:
* onFocus: text prompt to obtain focus (if a style is specified, add @ in front of the style name, so the first letter of the text prompt cannot have @)
* onEmpty: text prompt when the input item is empty (if a style is specified, @ is added before the style name, so the first letter of the text prompt cannot have @)
* onSucces: text prompt when verification is successful (if a style is specified, @ is added before the style name) , so the first letter of the text prompt cannot have @)
* onBlur: text prompt that has lost focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @) (validation failure prompt)
* dataType: data type parameters (text, number, date)
* comType: comparison type (=,>,>=,<,<=,!=)
* tipId: used for display Control id of prompt information (*)
* targetId: Comparison target control Id
*/
$.fn.extend({
checkCompare:function(inputArg){
if($(this). is("input") || $(this).is("textarea")){
//Get focus binding
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefined){
$("#" inputArg.tipId).html(inputArg.onFocus);
}
});
//Lost focus binding
$(this).bind("blur",function(){
var targetValue=$("#" inputArg.targetId).val();
if(targetValue!=undefined && targetValue! =null){
if($(this).val()!=undefined && $(this).val()!=""){
if(inputArg.dataType=="text"){
switch(inputArg.comType){
case "=":
if(targetValue==$(this).val()){
$("#" inputArg.tipId).html (inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "!=":
if(targetValue!=$(this).val()){
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$(" #" inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else if(inputArg.dataType=="number"){
if (isNaN (targetValue) == false && isNaN($(this).val()) == false) {
switch (inputArg.comType) {
case "=":
if (targetValue == $ (this).val()) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId) .html(inputArg.onBlur);
}
break;
case "!=":
if (targetValue != $(this).val()) {
$(" #" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case ">":
if ($(this).val() > targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case ">=":
if ($(this).val() >= targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$( "#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "<":
if ($(this).val() < targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "<=":
if ($(this).val() <= targetValue) {
$("#" inputArg.tipId) .html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
}else if(inputArg.dataType=="date"){
}
}else{
$("#" inputArg.tipId).html(inputArg.onEmpty);
}
}
});
}
}
});

Comparison effect and test code between control values


Rendering 1


Rendering 2

Copy code The code is as follows:


$("#txtPass2").checkCompare({
onFocus: "Compare with the previous one",
onEmpty: "The input cannot be empty",
onSucces: "Verification successful ",
onBlur:"Verification failed",
dataType:"number",
comType:">=",
tipId:"txtPass2Tip",
targetId:"txtPass1"
});











5. Input Parameter regular expression verification

This verification is relatively simple, because using regular expressions, you don’t need to think about the input situation yourself. You only need to introduce a regular expression

The following are the input parameters:

onFocus: text prompt to obtain focus (if you specify a style, add @ before the style name, so the first letter of the text prompt There cannot be @)

onEmpty: The input item is an empty text prompt (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @)

onSucces: Text prompt for successful verification (If you specify a style, add @ before the style name, so the first letter of the text prompt cannot be @)

onBlur: Text prompt that loses focus (If you specify a style, add @ before the style name, so the first letter of the text prompt cannot be There is @) (validation failure prompt)

regExp: regular expression

tipId: control id used to display prompt information (*)

jQuery regular expression verification
Copy code The code is as follows:

/**
* Validation of regular expressions
* Input parameters:
* onFocus: text prompt to obtain focus (if a style is specified, add @ in front of the style name, so the first letter of the text prompt cannot have @)
* onEmpty: text prompt when the input item is empty (if a style is specified, @ is added before the style name, so the first letter of the text prompt cannot have @)
* onSucces: text prompt when verification is successful (if a style is specified, @ is added before the style name, Therefore, the first letter of the text prompt cannot have @)
* onBlur: Text prompt that has lost focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @) (validation failure prompt)
* regExp : Regular expression
* tipId : Control id used to display tip information (*)
*/

$.fn.extend({
checkRegExp:function(inputArg){
if ($(this).is("input") || $(this).is("textarea")) {
//Get focus binding
$(this).bind("focus", function(){
if (inputArg.onFocus != undefined) {
$("#" inputArg. tipId).html(inputArg.onFocus);
}
});

//Get the lost focus event
$(this).bind("blur",function(){
if($(this).val()!=undefined && $(this).val()!=""){
if ($(this).val().match(inputArg.regExp ) == null) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur );
}
}else{
$("#" inputArg.tipId).html(inputArg.onEmpty);
}
});
}
}
});

Regular expression effects and test code


Enter non-digits


Enter the number

Copy the code The code is as follows:

$("#txtAge").checkRegExp({
onFocus: "Age must be a number",
onEmpty: "The input cannot be empty",
onSucces: "Verification successful ",
onBlur:"Verification failed",
regExp:/D/,
tipId:"txtAgeTip"
});
< ;input type="text" id="txtAge" value=""/>

This is a basic verification plug-in The prototype, we will continue to update in the later stage...
関連ラベル：
jquery フォームの検証
前の記事：JavaScript疑似配列実装メソッド_JavaScriptスキル 次の記事：テキストフィールドの残りの長さを計算するjsコード_javascriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
jquery ノートはどこでダウンロードできますか?
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート