jquery validate自定义checkbox验证规则和样式
2015-12-02 09:38
661 查看
参考:http://blog.csdn.net/xh16319/article/details/9987847
自定义checkbox验证,“检查checkbox是否选中”
添加到验证规则
添加自定义样式:
完整代码如下:
html
js
自定义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密码强度校验
- jQuery EasyUI CheckBoxTree的级联选中
- JQuery 的几个有用的技巧
- jquery 读取xml
- JQueryAjax+SpringMVC跨域请求
- 日常收藏的jquery技巧
- Jquery 1.9.1源码分析系列(十二)之筛选操作
- jquery判断输入密码两次是否相等
- Jquery插件之Fancybox丰富的弹出层效果附源码下载
- jQuery实现为控件添加水印文字效果(附源码)
- 分享15个大家都熟知的jquery小技巧
- jquery实现简单文字提示效果
- jQuery简单实现input文本框内灰色提示文本效果的方法
- jquery实现触发时更新下拉列表内容的方法
- 解决jQuery使用JSONP时产生的错误
- jQuery 1.9.1源码分析系列(十三)之位置大小操作
- jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
- Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
- jQuery实现获取绑定自定义事件元素的方法
- jquery密码强度校验