前端UI框架选择bootstrap，那么bootstrap-Validator作为表单校验是一个不错的选择。

以下内容前提是UI框架采用bootstrap。

引入依赖

第一个：校验控件

编写form表单

data-bv-｛校验规则｝,规则可以自定义，参考bootstrapValidator.extends.js。

注意提交按钮是submit类型。

     
        
      
            
       *名称：            
       
                
                    
       
        
      
        
      
            
       *爱好：            
       
                
                             篮球                                
                             足球                                
                             乒乓球                            
       
            
       *性别：            
       
                
                             男                                
                             女                            
       
        
      
      
            
       *下拉框：            
       
                
                                    
       
        
      
        
      
            
       *排序：            
       
                
        
                    
                                                 
         之后                
        
            
       
        
      
        
      
            
       *输入框组：            
       
                
        
                    
                             
         单位（元）                
        
            
       
        
      
        
      
            
       备注：            
       
                
                    
       
        
      
        
      
            
       
                
        保存                
        取消            
       
        
      
    
     

提交表单

$('#form').bootstrapValidator().on('success.form.bv',function (data) {          //TODO 提交成功后的业务   });

效果图

校验效果

扩展

扩展一个username校验规则，长度6-20字符。

(function($) {    $.fn.bootstrapValidator.i18n.username = $.extend($.fn.bootstrapValidator.i18n.username || {}, {        'default': '请输入有效用户名'    });    $.fn.bootstrapValidator.validators.username = {        validate: function(validator, $field, options) {           var _v =$field.val();           if(_v.length < 6 || _v.length >20){               return false;           }            return true;        }    };}(window.jQuery));