コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

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

繰り返しますが、プラグインには多くの問題があります。後で 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

 
Rendering 3

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 フォームの検証
ソース：php.cn
前の記事：JavaScript疑似配列実装メソッド_JavaScriptスキル 次の記事：テキストフィールドの残りの長さを計算するjsコード_javascriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート