文章目录

1. jQuery Validation表单验证框架
- 引入js
- Demo
- 默认校验规则
- 自定义校验规则
2. jQuery iCheck复选框插件
- 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);}});
});

说明：

validate() ：初始化jQuery validation对象
errorElement：出错时的元素的HTML类型
errorClass：出错时的元素的CSS属性
errorPlacement：出错时的处理函数
(error, element)：出错处理函数的入参
- error：出错时由2.和3.定义的HTML元素
- element：产生验证错误的元素
element.parent().parent().attr("class", "form-group has-error");：修改element父元素的样式，提醒验证出错
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 defaulthandle: '',// base class added to customized checkboxescheckboxClass: 'icheckbox',// base class added to customized radio buttonsradioClass: '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 hoverlabelHover: true,// class added to label if labelHover set to truelabelHoverClass: 'hover',// increase clickable area by given % (negative number to decrease)increaseArea: '',// true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabledcursor: false,// set true to inherit original input's class nameinheritClass: false,// if set to true, input's id is prefixed with 'iCheck-' and attachedinheritID: false,// add HTML code or text inside customized inputinsert: ''
}

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

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

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

回调事件

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

事件名称	使用时机
ifClicked	用户点击了自定义的输入框或与其相关联的label
ifChanged	输入框的 checked 或 disabled 状态改变了
ifChecked	输入框的状态变为 checked
ifUnchecked	checked 状态被移除
ifDisabled	输入框状态变为 disabled
ifEnabled	disabled 状态被移除
ifCreated	输入框被应用了iCheck样式
ifDestroyed	iCheck样式被移除

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

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

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

方法

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

方法	效果
$(‘input’).iCheck(‘check’);	将输入框的状态设置为checked
$(‘input’).iCheck(‘uncheck’);	移除 checked 状态
$(‘input’).iCheck(‘toggle’);	toggle checked state
$(‘input’).iCheck(‘disable’);	将输入框的状态设置为 disabled
$(‘input’).iCheck(‘enable’);	移除 disabled 状态
$(‘input’).iCheck(‘update’);	apply input changes, which were done outside the plugin
$(‘input’).iCheck(‘destroy’);	移除iCheck样式

JavaWeb常用工具/插件合集——validation和iCheck相关推荐

ps ico插件_常用 PS 插件合集（1）
强大的图像处理软件 Photoshop 有着海量不错的插件今天就向大家介绍几个常用的吧! 一.磨皮滤镜--Imagenomic Portraiture 这是个强大的磨皮插件可以设置细节平滑,肤色蒙 ...
MacW小编分享设计师们常用Sketch插件合集，让你效率翻倍！
常用Sketch插件都有哪些?Sketch插件总是层出不穷,可以让大家在作出炫酷设计稿的同时,更让大家的工作效率翻倍.macw小编为大家总结了一大波Sketch插件合集,喜欢的赶快收藏起来吧!1.Sk ...
21款常用修图插件合集打包
这套插件虽然只是一个安装包,但包含多个插件合集,每一款都是精品之作, 每款中有几十个预设,每款预设都可以手动的选择效果,同时也可以进行微调处理, 一些影楼和职业摄影师每人都是人手一份的优质插件,希望小 ...
PS、AE、PR、CAD、SPSS、3D Max、Maya、Office 等常用软件插件合集
去年的时候小资源当了一阵的设计公司运营,趁着摸鱼的同时,也会给公司搜集各种好用的插件毕竟插件谁用谁知道,这是可以大大提高工作效率的东西呀所以最近小资源又花了一点时间来给大家收集整理出了此次推文 ...
idea开发工具常用的插件合集汇总
idea插件的安装: file -> setting -> plugins ->install 1.GitToolBox 跟踪每行代码的提交修改记录. 2.Maven Helper ...
50个常用元器件图片_盘点2020年wordpress常用的50个插件合集
大家好,玩码哥今天给大家盘点一下2020年wordpress常用的50个插件合集,可以选择性安装或者是去搜索添加,大部分的插件是可以在网上搜到的. 1.All In One WP Security插件 ...
盘点2020年wordpress常用的50个插件合集
盘点2020年wordpress常用的50个插件合集,50个插件已经打包整理好,可以选择性安装或者是去搜索添加.如果后台经常出现安装不成功的!大部分的插件是可以在网上搜到的或者是在wordpress后 ...
ai包装插件_找AI插件很费劲，一次给你66款AI插件合集！每一款都是设计师常用...
作为设计师我们都知道,PS插件很常见也很多,但AI的却不好找,但其实Adobe Illustrator软件除了能够绘制高精度的矢量图之外,也可以为线稿提供较高的精度和控制,适合生产任何小型设计到大型的 ...
fcpx瘦身插件_FCPX常用插件合集
FCPX常用插件合集精选FCPX特效插件合集 50款Final Cut Pro X的特效插件合集大小:12 GB 每个插件都附带安装说明合集包含滤镜.文字.转场.调色.特效.发生器等多种插件,适 ...

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

文章目录

1. jQuery Validation表单验证框架

引入js

Demo

默认校验规则

自定义校验规则