使用jquery.validate.js实现boostrap3的校验和验证
使用jquery.validate.js实现boostrap3的校验和验证
boostrap3验证框架
jquery.validate.js校验表单
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
蕃薯耀 2015年9月15日 14:15:15 星期二
http://fanshuyao.iteye.com/
效果见下图:
一、插件下载
官网下载地址:http://jqueryvalidation.org/
或者在附件下载 jquery-validation-1.14.0.zip
二、加入js文件,依赖jquery
jquery.validate.min.js
additional-methods.min.js
messages_zh.min.js
additional-methods-custom.js (自己定义的校验方法扩展js文件)
三、验证表单
1、页面
<div class="w720 mt5 fr">
<div class="blue5 pt20 pb20 p10 user_password">
<form id="userInfoEditForm" class="form-horizontal">
<div class="form-group">
<label for="mobile" class="control-label">昵称:</label>
<div >
<input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入昵称" value="${userInSession.nickname}"/>
</div>
</div>
<div class="form-group">
<label for="mobile" class="control-label">姓名:</label>
<div>
<input type="text" class="form-control" id="realName" name="realName" placeholder="请输入真实姓名" value="${userInSession.realName}"/>
</div>
</div>
<div class="form-group">
<label for="tel1" class="control-label">性别:</label>
<div>
<select name="genders" id="genders" class="form-control">
<option value="">请选择…</option>
<c:forEach items="${genders}" var="gender">
<option value="${gender}" ${userInSession.genders eq gender?"selected='selected'":""}>${gender.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="tel2" class="control-label">联系地址:</label>
<div>
<input type="text" class="form-control" id="address" name="address" placeholder="请输入联系地址" value="${userInSession.address}"/>
</div>
</div> <div class="form-group">
<div class="form-group-btn">
<button type="submit" id="btnUserInfoEdit2" class="btn btn-primary">确认</button>
</div>
</div>
</form>
</div>
</div>
2、js校验
var validateObj = $('#userInfoEditForm').validate({
ignore: "",
errorClass : 'help-block',
focusInvalid : true,
rules : {
nickname : {
required : true
},
realName : {
required : true
},
genders : {
required : true
/* ,select2Reg : true */
},
address : {
required : true
}
},
messages : {
nickname : {
required : "昵称不能为空"
},
realName : {
required : "姓名不能为空"
},
genders : {
required : "请选择性别"
},
address : {
required : "地址不能为空"
}
},
onclick : function (element) {
$(element).valid();
},
onfocusout: function (element) {
$(element).valid();
},
highlight : function(element) {
//alert($(element).closest('.form-group').html());
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success : function(label) {
label.closest('.form-group').removeClass('has-error').addClass('has-success');
label.remove();
},
errorPlacement : function(error, element) {
element.parent('div').append(error);
},
submitHandler : function(form) {
return false;
form.submit();//form.submit(); 或者$(form).ajaxSubmit();
}
}); $("#genders").change(function(){
$(this).valid();
});
3、自定义校验方法(additional-methods-custom.js)
/**
* 检查手机号码
* @since 2015-09-14
*/
jQuery.validator.addMethod("phoneReg", function(value, element) {
var value = $(element).val();
console.log("value = "+value)
return this.optional(element) || (checkPhone(value));
}, "请输入正确的11位手机号码");
四、详细使用见:http://fanshuyao.iteye.com/blog/2243580
五、select2校验问题见
http://fanshuyao.iteye.com/blog/2243544
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
蕃薯耀 2015年9月15日 14:15:15 星期二
http://fanshuyao.iteye.com/
使用jquery.validate.js实现boostrap3的校验和验证的更多相关文章
- jquery.validate.js之自定义表单验证规则
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jquery.validate.js默认配置,jquery.validate.js自定义提示信息
jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...
- jquery.validate.js remote (php)
网上的人不厚道呀 validate 这玩意的异步是 返回的 echo 'true' 或者 echo 'false';很少有人说呀~.~ 转载了一篇原文: jquery.validate.js对于数 ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
随机推荐
- 在使用Ibatis查询数据返回时,报如下错误:java ibatis The error happened while setting a property on the result object
问题: 在使用Ibatis查询数据返回时,报如下错误: [com.show.add.proxy.SqlMapClientTemplateProxy]com.ibatis.common.jdbc.exc ...
- 再探CRC
之前写了CRC16的程序,虽说能用,却不知其所心然,现在要用CRC32,重温一遍,一下就通了.笔记如下 CRC我没记错的话是Cyclic Redundancy Code,Cyclic和Redundan ...
- Wide character in print at a2.pl line 返回json 需要encode_utf8
centos6.5:/root/test#cat a2.pl use Net::SMTP; use LWP::UserAgent; use HTTP::Cookies; use HTTP::Heade ...
- 【Python Network】使用DOM生成XML
单纯的为DOM树添加结点. #!/usr/bin/env python # Generating XML with DOM - Chapter 8 - domgensample.py from xml ...
- 汉企C#面向对象——继承
public class Shengwu { private string _Name; public string Name { get { return _Name; } set { _Name ...
- POJ -- 1151
Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 16222 Accepted: 6172 Descrip ...
- 敌兵布阵 HDOJ--1166
敌兵布阵 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submissi ...
- Cookie及Session文件在本机的存放位置
1. Cookie的存放位置 D:\Users\xlxiao\AppData\Roaming\Microsoft\Windows\Cookies 2. Session的存放位置(目前未解决)
- java基础(十四)集合(一)
这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...
- ORM介紹及ORM優點、缺點
主要內容: 1.ORM的概念 2.為什麽要使用ORM 3.ORM的優缺點 4..Net中有那些ORM產品 5.總結 一.ORM的概念 ORM,即Object-Relational Mapping( ...