bootstrap validation submit

表单提交校验功能

前端样式用bootstrap，依赖jquery，应用jquery自带的validation插件。

其实校验是一个小功能，做了还几天主要是因为碰到了两个问题，
一个是对于提示信息样式添加不出效果，

一个是不经过submit提交form表单。

对于第一个问题，是因为CSS样式优先级问题，刚刚接触bootstrap，个性化样式

用的不熟，到现在也不知道如何解决CSS优先级问题。但removeClass清除样式可以用。

其中用到的几句代码是

     

  //自定义错误消息放到哪里
        errorPlacement : function(error, element) {
            element.next().remove();//删除显示图标
            element.after('<span class=" form-control-feedback" aria-hidden="true"></span>');
            element.closest('.form-group').append(error);//显示错误消息提示
        },
        //给未通过验证的元素进行处理
        highlight : function(element) {
            $(element).closest('.form-group').addClass('has-error has-feedback');
        },
        //验证通过的处理
        success : function(label) {
            var el=label.closest('.form-group').find("input");
            el.next().remove();//与errorPlacement相似
            el.after('<span class="  form-control-feedback" aria-hidden="true"></span>');
            label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
            label.remove();
        },

如果想要改样式，可以调试页面看决定相应样式的CSS文件，直接对齐修改。

对于第二个问题，也是试探中成功的。在这里简单说下适合的JSP情况吧，在弹出表单中加校验，没有submit按钮，

只有ajax点击触发的事件，这样在提交的时候如何保证，在用jquery validation插件的情况下能对指定表单进行校验。

    var validator = $("#form1").validate({
           rules: {
           },
           messages:{
           }
    });  

    $(".selector").on('click',function(){
        //验证通过后提交
         if(validator.form()){
            //自己写的ajax调用
        }
    });
    

这样写着实有些笨拙，本人也试过直接在插件的接口上写ajax方法，但是都是submit，让我一通尝试，没有达到预期效果。

比如W3C上这样写

$(".selector").validate({
 submitHandler: function(form)
   {
      $(form).ajaxSubmit();
   }
 }) 

submitHandler我理解为一个回调函数，不能自己写请求。尝试过用remote，也没有成功，如果有人可以做出来，也麻烦分享一下，

 我也可以摒弃我的野路子。

 

 

 在这如果想个性化校验，可以再jquery.validation.js中自己去改，或者自己写新的method。

  // 手机号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
       var length = value.length;
       return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");

再说一说自己对改插件的见解，这个的应用首先是JSP代码会很干净，封闭性很好，标签中没有加另外的属性，而是在js中配置。

但是有一点，我发现它在.form-group的div中能很好地应用，table中就不行了，难免有些拘束。

再就是除了一些自己加的method可以共用以外，validate方法只能定位一个form表单，这样减小了插件代码的复用性。

但是他的.form()方法可以返回boolean值，这样也为我们个性化校验方式提供了便利。

下面是页面效果