自分で書いたhtml 5フォーム属性のようなフォーム検証フレームワークはjqueryに基づいています.

/    &     js      （  jquery ）



/**
 *                                
 * @param id      id
 * @param options    { errorElClass errorShowClass loop}
 *   ：text <input name="username" type="text" id="username"  regValidityTxt="   10   " reg="^[0-9]{10}$"  errorLabel="usernameError" notBlank="notBlank" valueMissingTxt="    ">
 * textarea <textarea rows="1" cols="1" id="textarea" reg="^[a-z]{2,8}$" regValidityTxt="    a-z" errorLabel="emailError" notBlank="notBlank" valueMissingTxt="    ">asdfadf</textarea>
 *       <input type="checkbox" name="agree" value="true" requiredCheck="requiredCheck" requiredCheckTxt="     " 1errorLabel="checkError"/>
 *  <input name="repassword" type="password" id="repassword" notBlank="notBlank" valueMissingTxt="    " errorLabel="confirmError" matchFor="password" matchForTxt="         "/>
 */
var validateForm = function(id,options){
    var errorCount = 0 ;
    var targetEnumIdValidity = true;
    var isTargetEnum = false;  //        
    var $enum = $('form#'+id+' :input,textArea,select');    //       
    var errorElClass  = options.errorElClass?options.errorElClass:"error";       //      
    var errorShowClass = options.errorShowClass?options.errorShowClass:"errorLabel";
    var targetEnumId = options.targetEnumId;
    var tipClass =   options.tipClass?options.tipClass:"tipClass";
    var showTip =  options.showTip;
    var loop =  options.loop;             //       （                ）
    $.each($enum,function(){
        var $e = $(this);
        if(targetEnumId){
            if(targetEnumId!=$e.attr('id'))
                isTargetEnum = true;
            else
                isTargetEnum =false;

        }
       if(!isTargetEnum){
        var reg = $e.attr('reg');             //        reg    
        var matchFor = $e.attr('matchFor');             //  
        var matchForTxt = $e.attr('matchForTxt');             //        
        var regValidityTxt = $e.attr('regValidityTxt');      //       （   ）
        var notBlank =$e.attr('notBlank');                   //   
        var valueMissingTxt = $e.attr('valueMissingTxt');    //     
        var requiredCheck = $e.attr('requiredCheck');       //  
        var requiredCheckTxt = $e.attr('requiredCheckTxt');   //    
        var errorLabel = $e.attr('errorLabel');
        var $error = $('#'+errorLabel);
        var val = $e.val();
        var tip =  $e.attr('tip')? $e.attr('tip'): $e.attr('regValidityTxt');

        //            
        $e.focus(function(){
            $error.html('');
            $error.removeClass(errorShowClass);
            $e.removeClass(errorElClass);
            if(showTip){
               $error.addClass(tipClass);
            }  $error.html(tip);
        });

        if(requiredCheck){
            //             
            if($e.is("input:radio,input:checkbox")){
                 if(!$e.is(":checked")){
                   commonDo($e,$error,requiredCheckTxt,errorShowClass,errorElClass,showTip,tipClass);
                   if(!loop){
                       targetEnumIdValidity = false;
                       return;
                   }
                   errorCount++;
                 }
             }
        }
        //         
        if(notBlank){
            if (val == undefined || val == null || val == "null" || val.trim() == "" || val.trim().length == 0){
                   commonDo($e,$error,valueMissingTxt,errorShowClass,errorElClass,showTip,tipClass);
                   if(!loop){
                      targetEnumIdValidity = false;
                      return;
                   }
                   errorCount++;
            }
        }
        //    
        if(reg){
            var $reg = new  RegExp(reg);
            if(!$reg.test(val)){
                commonDo($e,$error,regValidityTxt,errorShowClass,errorElClass,showTip,tipClass);
                if(!loop){
                    targetEnumIdValidity = false;
                    return;
                }
                errorCount++;
            }
        }
        //                      
        if(matchFor){
             var $matchTarget = $('#'+matchFor);
             if($matchTarget && ($matchTarget.val() != val)){

              commonDo($e,$error,matchForTxt,errorShowClass,errorElClass,showTip,tipClass);
                if(!loop){
                    targetEnumIdValidity = false;
                    return;
                }
                errorCount++;
             }
        }
       }
    });
    // js return each          
    if(loop)
       return !errorCount;
    else
        return targetEnumIdValidity;
}

/**
 *          qianxiaozhi
 * @param $e 
 * @param $error
 * @param text
 * @param errorShowClass
 * @param errorElClass
 */
function commonDo($e,$error,text,errorShowClass,errorElClass,showTip,tipClass){
     if($error){
               $error.html(text?text:'');
               $error.addClass(errorShowClass);
               if(showTip){
                   $error.removeClass(tipClass);
               }
            }
           if(errorElClass){
               $e.addClass(errorElClass);
           }
}
/**
 *          
 * @param options
 */
var submitCallBack = function(options){
    var errorElClass  = options.errorElClass?options.errorElClass:"error";       //      
    var errorShowClass = options.successShowClass?options.successShowClass:"errorLabel";
    var targetEnumId = options.targetEnumId? options.targetEnumId:"error";
    var error =    options.error;

    var $e = $("#"+targetEnumId);
    if($e){
        var errorLabel = $e.attr('errorLabel');
        var $error = $('#'+errorLabel);
        //      
        commonDo($e,$error,error,errorShowClass,errorElClass);
    }
}

/**
 *             tip
 * @param id
 * @param option
 */
var formTipRender = function(id,tipClass){
      var $enum = $('form#'+id+' :input,textArea,select');    //       
      var $tipClass =   tipClass?tipClass:"tipClass";
     $.each($enum,function(){
         var $e = $(this);
         var tipShowLabel = $e.attr('tipShowLabel')?$e.attr('tipShowLabel'):$e.attr('errorLabel');
         var tip =  $e.attr('tip')? $e.attr('tip'): $e.attr('regValidityTxt');
         //            
        $e.focus(function(){
            if(tipShowLabel){
                var $tip = $('#'+tipShowLabel);
                if($tip){
                    $tip.removeClass();
                    $tip.addClass($tipClass);
                }   $tip.html(tip);
                }

        });

         $e.blur(function(){
            var $tip = $('#'+tipShowLabel);
            if(tipShowLabel && $tip.hasClass($tipClass)){
               $tip.html('');
            }
        });
     });
}

 <input name="username" type="text" id="username" value="$!stringEscapeUtils.escapeHtml($!username)" class="common-input" placeholder="      " reg="^[(\u4e00-\u9fa5)a-zA-Z0-9_-]{2,20}$" regValidityTxt="      、  、   “_”、“-”4-20     " errorLabel="usernameError" notBlank="notBlank" valueMissingTxt="       ">
 <div id="usernameError" class="tipClass" ></div>

<input type="password" name="password" id="password" class="common-input"  placeholder="     " notBlank="notBlank" reg="^[a-zA-Z0-9_-]{6,16}$" regValidityTxt="     、   “_”、“-”6-16     " valueMissingTxt="      " errorLabel="pwdError">
<div id="pwdError" class="tipClass"></div>
<input name="repassword" type="password" id="repassword" class="common-input" placeholder="       " notBlank="notBlank" tip="       " valueMissingTxt="      " errorLabel="confirmError" matchFor="password" matchForTxt="         ">
 <div id="confirmError" class="tipClass"></div>

 //          
            $('#password').blur(function(){
                validateForm('frm_reg',{loop:false,targetEnumId:$(this).attr('id'),errorElClass:"error-common-input",errorShowClass:"red",
                showTip:true,tipClass:"tipClass"});
            });

             //          
            $('#repassword').blur(function(){
                validateForm('frm_reg',{loop:false,targetEnumId:$(this).attr('id'),errorElClass:"error-common-input",errorShowClass:"red",
                showTip:true,tipClass:"tipClass"});
            });

//                 
            $('#btnRegister').click(function(){
                //                       
                var options ={loop:true,errorElClass:"error-common-input",errorShowClass:"red",showTip:true,tipClass:"tipClass"};
                if(validateForm('#frm_reg',options)){
                   $('#frm_reg').submit();
                }
            });