jQuery_jqueryに基づいたフォーム送信検証の実装-jsチュートリアル-php.cn

jQuery_jqueryに基づいたフォーム送信検証の実装

WBOY

リリース： 2016-05-16 16:30:34

オリジナル

1373 人が閲覧しました

HTML フォームコード:

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

<フォームメソッド="ポスト"アクション=""> ユーザー名: メール: プロフィール:

jQuery コード:

コードをコピー

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

$(function(){ 

$("form :input.required").each(function(){ 

var $required = $("*");
//$(this).parent().append($required) //ドキュメントに追加します 

$(this).parent().prepend($required);
});
$('form :input').blur(function(){ 

var $parent = $(this).parent();
If($(this).is('#ユーザー名')){ 

If(this.value==""||this.value.length
var errorMsg = 'ユーザー名を 6 文字以上入力してください' ;

$parent.append('' errorMsg '');
}else{ 

var okmsg = '正しい入力';
$parent.append('' okMsg '');
                                                                                                                       
                                                                                                     
If($(this).is('#email')){ 

if(this.value==""||(this.value!=""
&&!/. @. .[a-zA-Z]{2,4}$/.test(this.value
))){ 

var errorMsg = '正しいメールアドレスを入力してください';
$parent.append('' errorMsg '');
                                                                                                                                                                         
var okmsg = '正しい入力';
$parent.append('' okMsg '');
                                                                                                                                                                            
                                                                                                     
});
$("form :input").focus(function(){ 

var $parent = $(this).parent();
$parent.find(".formtips").remove();
});
$("#send").click(function(){ 

var $parent = $(this).parent().parent();
$parent.find(".formtips").remove();$("form .required:input").trigger('blur');
var numError = $('form .onError').length;
If(numError){ 


 を返します。
                                                                                   
});
$("#res").click(function(){ 

var $parent = $(this).parent().parent();
$parent.find(".formtips").remove();
});
});





コードは非常にシンプルで理解しやすいので、ここでは詳しく説明しません。 