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值,这样也为我们个性化校验方式提供了便利。
下面是页面效果
bootstrap validation submit的更多相关文章
- .NET MVC 学习笔记(五)— Data Validation
.NET MVC 学习笔记(五)—— Data Validation 在实际应用中,我们需要对数据进行增查改删业务,在添加和修改过程中,无论你编写什么样的网页程序,都需要对用户的数据进行验证,以确数据 ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- 12月6日 看Active Record validation ; 做jdstore ,注意gem bootstrap 版本只支持bootstrap3。
Active Record validation: new_record?()//用于验证刚新建,但没存入database中的数据 ,返回true或false persisted?() //和new_ ...
- bootstrap 下的 validation插件
http://reactiveraven.github.io/jqBootstrapValidation/
- MVC遇上bootstrap后的ajax表单模型验证
MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...
- jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...
- ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素
阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...
- validate[.unobtrusive]和Bootstrap实现tooltip错误提示
validate[.unobtrusive]和Bootstrap实现tooltip错误提示 类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效 ...
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证
1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...
随机推荐
- Leetcode初级算法(链表篇)
删除链表的倒数第N个节点 感觉自己对于链表的知识还是了解的不够深入,所以没有想到用双指针进行操作.我的想法是这样的,首先计算整个链表的长度,然后遍历到长度减去n的节点处,执行删除操作. 自己的代码: ...
- Angular2.0的学习(二)
第二节课 1.了解路由的基础知识 2.子路由.辅助路由.路由守卫和保护路由 路由守卫: CanActivate:处理导航到某路由的情况 CanDectivate:处理从当前路由离开的情况 Resolv ...
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- Docker从入门到实战(二)
Docker从入门到实战(二) 一:什么是docker Docker是一个开源的应用容器引擎,开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到主流的Linux.MacOS.Windo ...
- 用servlet获取IP等信息
Locale languageType=request.getLocale();//获取用户语言 String localIp=request.getLocalAddr();//获取本地ip int ...
- tomcat的webapps下放置多个项目时会出现很多exception
今天干了一件比较逗比的事,在tomcat的项目目录wepapps下又新建了一个文件夹backup,然后在backup下放置了之前项目的war包...然后启动tomcat的时候各种exception 大 ...
- 《Head First 设计模式》之策略模式——鸭子行为
策略模式(Strategy Pattern) ——定义了算法族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. (每个功能的多种实现成为一个算法族,这些算法族被分别封装 ...
- laydate 显示结束时间不小于开始时间
jsp: <div class="form-group"> <label >交易时间:</label> <input ...
- 【干货】JavaScript DOM编程艺术学习笔记4-6
四.案例研究:JavaScript图片库 js: function showPic(whichpic){ //取得链接 var source=whichpic.getAttribute("h ...
- Android RxJava2+Retrofit2单文件下载监听进度封装
RxJava2和Retrofit2用的越来越多,最近也在封装一个通用的网络请求库,其中就包括了单文件下载的方法,所以这里进行记录.文末附带Demo 由于网上很多的方法都是使用拦截器进行进度的监听,个人 ...