文章目錄
1. jQuery Validation表單驗證框架
<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>
<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，輸入值不能大於5min：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事件。
| 事件名稱 | 使用時機 |
|---|---|
| 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樣式 |