表单提交校验功能
前端样式用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值,这样也为我们个性化校验方式提供了便利。
下面是页面效果