jquery validate自定义checkbox验证规则和样式
参考:http://blog.csdn.net/xh16319/article/details/9987847
自定义checkbox验证,“检查checkbox是否选中”
jQuery.validator.addMethod("isAgreeRule", function(value, element) {
return element.checked;
}, "请阅读并同意用户协议后提交!");
添加到验证规则
$(function() {
$("#registerFrom").validate({
rules : {
login_name : {
required : true
},
password : {
required : true,
rangelength : [ 8, 20 ]
},
confirm_password : {
required : true,
equalTo : "#password"
},
captcha : {
required : true
},
agree_rule : {
isAgreeRule : true
}
},
errorPlacement : function(error, element) {
if (element.is(':radio') || element.is(':checkbox')) { // 如果是radio或checkbox
var eid = element.attr('name'); // 获取元素的name属性
error.appendTo(element.parent()); // 将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
},
submitHandler : function(form) {
submitFrom();
}
});
});
添加自定义样式:
<style type="text/css">
input.control-label-error {
border: 1px solid red;
} .control-label-error {
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
</style>
完整代码如下:
html
<%@ page language="java" pageEncoding="UTF-8"%>
<style type="text/css">
input.control-label-error {
border: 1px solid red;
} .control-label-error {
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
</style> <!-- 注册框 -->
<div class="modal fade" id="regModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">注册</h4>
</div>
<div class="modal-body">
<div class="login_box">
<form id="registerFrom" method="post"
class="form-horizontal form-validate">
<div class="form-group">
<input type="text" class="form-control"
placeholder="请输入用于注册的手机号码" name="login_name">
</div>
<!-- <div class="form-group has-mb-code">
<input type="text" class="form-control" placeholder="手机验证码">
<a href="javascript:" class="btn btn-warning m-code">获取验证码</a>
</div> -->
<div class="form-group">
<input id="password" type="password" class="form-control"
placeholder="密码(长度为8-20个字符,含字母和数字)" name="password">
</div>
<div class="form-group">
<input type="password" class="form-control"
placeholder="确认密码(长度为8-20个字符,含字母和数字)" name="confirm_password">
</div>
<div class="form-group has-code">
<input type="text" class="form-control" placeholder="图形验证码"
name="captcha"> <span class="form-control-code"><img
id="kaptcha" src="../kaptcha.jpg"></span>
</div>
<div class="checkbox">
<label> <input id="agree_rule" type="checkbox"
name="agree_rule"> 我已阅读并同意<a href="#">《用户协议》</a>
</label>
</div>
<button type="submit" data-loading-text="提交中..."
class="btn btn-primary btn-block m_b">注册</button>
<!-- <a href="perfectinfo.html" class="btn btn-primary btn-block m_b">注册</a> -->
<p>
<a href="javascript:" data-dismiss="modal" data-toggle="modal"
data-target="#loginModal">老用户,请登录</a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="${rootPath}/resources/js/register/register.js"></script>
<script type="text/javascript">
$(function() {
$('#kaptcha').click(
function() {
$("#kaptcha").hide()
.attr(
'src',
'../kaptcha.jpg?'
+ Math.floor(Math.random() * 100))
.fadeIn();
});
});
</script>
js
jQuery.validator.addMethod("isAgreeRule", function(value, element) {
return element.checked;
}, "请阅读并同意用户协议后提交!"); $(function() {
$("#registerFrom").validate({
rules : {
login_name : {
required : true
},
password : {
required : true,
rangelength : [ 8, 20 ]
},
confirm_password : {
required : true,
equalTo : "#password"
},
captcha : {
required : true
},
agree_rule : {
isAgreeRule : true
}
},
errorPlacement : function(error, element) {
if (element.is(':radio') || element.is(':checkbox')) { // 如果是radio或checkbox
var eid = element.attr('name'); // 获取元素的name属性
error.appendTo(element.parent()); // 将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
},
submitHandler : function(form) {
submitFrom();
}
});
}); function registerFrom() {
var url = rootPath + "/web/register.html";
var params = $("#registerFrom").serialize();
$.post(url, params, function(data) {
if (data.code == 0) {
window.location.href = rootPath + '/role/list.html';
}
});
}
jquery validate自定义checkbox验证规则和样式的更多相关文章
- jQuery Validate自定义各种验证方法(转)
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- jQuery Validate自定义金钱验证,是否为金额格式,保留两位小数,并支持千分制货币格式
//自定义函数实现 isMoney: function (value, element){ // return this.optional(element) || /(^[1-9]([0-9]+)?( ...
- JQuery Validate - 自定义js验证
(function (window, $) { var validResult = {}; var checkObjs = { /** * 检查输入的一串字符是否全部是数字 * 输入:str Stri ...
- jquery validate 自定义验证方法
query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...
- jquery validate 自定义验证方法 日期验证
jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方 ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- Jquery.validate表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/API: http://jquery.bassista ...
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
随机推荐
- .Net身份验证概述
一直以来,所有的系统基本都会有用户的登陆验证过程,整个过程其实也不难理解,就是对于cookie的解析.微软的.Net平台围绕用户身份验证授权也有好几个版本了,从早期的Membership到Identi ...
- 【CodeForces 605A】BUPT 2015 newbie practice #2 div2-E - Sorting Railway Cars
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=102419#problem/E Description An infinitely lon ...
- ActiveRecord中andFilterWhere使用
查询数据库时 $model; if(!empty($name)) { $model->andWhere(['name'=>$name]); } 可以用andFilterWhere,自动的把 ...
- hive 使用笔记(partition; HDFS乱码)
6. insert 语句 1) 因为目标表有partition, 所以刚开始我使用的语句是 insert overwrite table sa_r_item_sales_day_week_month ...
- href="javascript:void(0)"
javascript:是伪协议,表示url的内容通过javascript执行.void(0)表示不作任何操作,这样会防止链接跳转到其他页面.这么做往往是为了保留链接的样式,但不让链接执行实际操作,具体 ...
- android studio问题-ICCP:Not recognizing known sRGB profile
转:http://my.oschina.net/1pei/blog/479162 PNG格式:每个PNG文件是由一个PNG标识(signature),后面跟一些数据块(chunk),每个chunk由 ...
- Eclipse学习总结(02)-动态项目部署到到本地Tomcat
一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...
- jquery------提供灵活的方法参数
index.jsp <h1 >再次重逢的世界</h1> my.js $(document).ready(function(){ (function($){ $.fn.shado ...
- c/c++细节知识整理
这篇文章总结了部分c/c++琐碎的细节知识. 目录如下: (一)bool类型 知识点出处较多,无法一一列举,向原作者致敬. (一)bool类型 在c99标准以前,c语言并没有定义bool类型.如果需要 ...
- Advice for applying Machine Learning
https://jmetzen.github.io/2015-01-29/ml_advice.html Advice for applying Machine Learning This post i ...