JavaWeb常用工具/插件合集——validation和iCheck

1. jQuery Validation表单验证框架

• 引入js

<script src="/static/js/jquery-validation/jquery.validate.min.js"></script>
<script src="/static/js/jquery-validation/additional-methods.js"></script>
<script src="/static/js/jquery-validation/localization/messages_zh.min.js"></script>

• Demo

<form:input path="username" cssClass="form-control required" placeholder="用户名" />
$(function() {
	$("#inputForm").validate({
		errorElement: 'span',
		errorClass: 'help-block',
		errorPlacement: function (error, element){
			element.parent().parent().attr("class", "form-group has-error");
			error.insertAfter(element);
		}
	});
});

说明：

1. validate() ：初始化jQuery validation对象
2. errorElement：出错时的元素的HTML类型
3. errorClass：出错时的元素的CSS属性
4. errorPlacement：出错时的处理函数
5. (error, element)：出错处理函数的入参
   • error：出错时由2.和3.定义的HTML元素
   • element：产生验证错误的元素
6. element.parent().parent().attr("class", "form-group has-error");：修改element父元素的样式，提醒验证出错
7. error.insertAfter(element);：把验证出错时生成的元素插入到界面出错元素之后，用于文字提醒等

• 默认校验规则

  • required：true，必须字段
  • remote：使用ajax方法调用check.php验证输入值
  • email：true，必须输入正确格式的电子邮件
  • url：true，必须输入正确格式的网址
  • date：true，必须输入正确格式的日期
  • dateISO：true，必须输入正确格式的ISO日期，如2009-06-23,1998/01/22，只验证格式，不验证有效性
  • number：true，必须为合法的数字
  • digits：true，必须为整数
  • creditcard：必须输入合法的信用卡号
  • equalTo：#field，值必须和#field相同
  • accept：输入用于合法后缀名的字符串（上传文件的后缀）
  • maxlength：5，输入长度最多是5的字符串（汉字算一个字符）
  • minlength：5，输入长度最短是5的字符串（汉字算一个字符）
  • rangelength：[5,10]，输入长度介于5和10之间的字符串（汉字算一个字符）
  • range：[5,10]，输入的值必须介于5和10之间
  • max：5，输入值不能大于5
  • min：5，输入值不能小于5

• 自定义校验规则

$.validator.addMethod("mobile", function(value, element){
	var length = value.lenght;
	var mobile = /^((13[0-9])|(15[^4,\D])|(18[0,5-9]))\d{8}$/;
	return this.optional(element) | (length==11 && mobile.test(value));
}, "手机号码验证错误");

2. jQuery iCheck复选框插件

【转】http://www.jq22.com/yanshi784

iCheck简介

iCheck插件就像是复选框和单选按钮的构造器。
它将每个输入框都用一个div包裹起来，这样，你就可以按自己的需要定制样式或者使用自带的皮肤了。
你还可以通过insert参数向这个div中放置HTML代码或文本。
主要作用：

• 渲染并美化当前页面的复选框或单选框
• 响应复选框或单选框的点击事件

页面引用

• CSS部分

<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css/>

• JS部分

<script src="/static/assets/plugins/iCheck/icheck.min.js></script>

使用方法

代码生成

对于下面这段HTML代码：

<label>
  <input type="checkbox" name="quux[1]" disabled>
  Foo
</label>
<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>
<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">

在默认参数下使用iCheck时会得到如下结果：

<label>
  <div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div>
  Foo
</label>
<label for="baz[1]">Bar</label>
<div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div>
<label for="baz[2]">Bar</label>
<div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div>

默认情况下，iCheck并不会给输入框外面包裹的div设置任何CSS样式（在你不使用皮肤的时）。

初始化

首先引入jQuery v1.7+ (或 Zepto)，然后引入jquery.icheck.js(或者zepto.icheck.js) 。
iCheck支持所有选择器（selectors），并且只针对复选框和单选按钮起作用：

// customize all inputs (will search for checkboxes and radio buttons)
$('input').iCheck();

// handle inputs only inside $('.block')
$('.block input').iCheck();

// handle only checkboxes inside $('.test')
$('.test input').iCheck({
  handle: 'checkbox'
});

// handle .vote class elements (will search inside the element, if it's not an input)
$('.vote').iCheck();

// you can also change options after inputs are customized
$('input.some').iCheck({
  // different options
});

美化选择框

HTML元素

<input type="checkbox" class="icheck_test"/>

初始化添加CSS效果

$('input[type="checkbox"].icheck_test,input[type="radio"].icheck_test').iCheck({
	checkboxClass: 'icheckbox_minimal-blue',
    radioClass   : 'iradio_minimal-blue'
});

icheckbox_minimal-blue和iradio_minimal-blue都是iCheck自带的主题样式

参数

下面是参数列表及其默认值：

{
	// 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
	handle: '',
	// base class added to customized checkboxes
	checkboxClass: 'icheckbox',
	// base class added to customized radio buttons
	radioClass: 'iradio',
	// class added on checked state (input.checked = true)
	checkedClass: 'checked',
	// if not empty, used instead of 'checkedClass' option (input type specific)
	checkedCheckboxClass: '',
	checkedRadioClass: '',
	// if not empty, added as class name on unchecked state (input.checked = false)
	uncheckedClass: '',
	// if not empty, used instead of 'uncheckedClass' option (input type specific)
	uncheckedCheckboxClass: '',
	uncheckedRadioClass: '',
	// class added on disabled state (input.disabled = true)
	disabledClass: 'disabled',
	// if not empty, used instead of 'disabledClass' option (input type specific)
	disabledCheckboxClass: '',
	disabledRadioClass: '',
	// if not empty, added as class name on enabled state (input.disabled = false)
	enabledClass: '',
	// if not empty, used instead of 'enabledClass' option (input type specific)
	enabledCheckboxClass: '',
	enabledRadioClass: '',
	// class added on hover state (pointer is moved onto an input)
	hoverClass: 'hover',
	// class added on focus state (input has gained focus)
	focusClass: 'focus',
	// class added on active state (mouse button is pressed on an input)
	activeClass: 'active',
	// adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
	labelHover: true,
	// class added to label if labelHover set to true
	labelHoverClass: 'hover',
	// increase clickable area by given % (negative number to decrease)
	increaseArea: '',
	// true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
	cursor: false,
	// set true to inherit original input's class name
	inheritClass: false,
	// if set to true, input's id is prefixed with 'iCheck-' and attached
	inheritID: false,
	// add HTML code or text inside customized input
	insert: ''
}

• 调用iCheck时，只需要将修改了默认值的参数列出来即可：

$('input').iCheck({
  labelHover: false,
  cursor: true
});

你可以对上面列出的任何class重置样式。

回调事件

iCheck提供了大量回调事件，都可以用来监听change事件。

• 使用on()方法绑定事件：

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
  console.log(event.target);
});

• ifCreated事件应该在插件初始化之前绑定。
• event.target指向发生事件的checkbox或radio

方法

下面这些方法可以用来通过编程方式改变输入框状态（可以使用任何选择器）：