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

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(); }); });



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