本節課重點了解 EasyUI 中 ValidateBox(驗證框)組件的使用方法，這個組件依賴於
Tooltip(提示框)組件。
一． 加載方式
//class 加載方式
<input id="email" class="easyui-validatebox"
data-options="required:true,validType:'email'" />
//JS 加載調用
$('#email').validatebox({
required : true,
validType : 'email',
});
二． 屬性列表
//屬性設置
$('#email').validatebox({
required : true,
validType : 'email',
//validType : 'url',
//validType : 'length[2,20]',
//validType : ['email', 'length[10,20]'],
//validType : 'remote["content.php", "username"]',
//delay : 3000,
missingMessage : '請填寫電子郵件',
invalidMessage : '電子郵件格式不正確',
tipPosition : 'right',
deltaY : 120,
novalidate : true,
});
//Ajax 遠程驗證
if ($_POST['username'] == 'Lee') {
echo 'true';
} else {
echo 'false';
}
三． 方法列表
//銷毀組件
$('#email').validatebox('destroy');
//驗證碼文本框是否有效
console.log($('#email').validatebox('validate'));
//返回驗證的結果
console.log($('#email').validatebox('isValid'));
//禁用和啟用
$('#email').validatebox('disableValidation');
$('#email').validatebox('enableValidation');
PS：我們可以使用$.fn.validatebox.defaults 重寫默認值對象。
四． 自定義驗證
我們可以使用重寫默認規則的方式來創建一個新的規則。
//新增一個規則
$.extend($.fn.validatebox.defaults.rules, {
minLength : {
validator : function (value, param) {
return value.length >= param[0];
},
message : '請長度不小於{0}的字符',
},
});
//調用
$('#email').validatebox({
required : true,
validType : 'minLength[5]',
});
三．方法列表
//銷毀組件
$('#email').validatebox('destroy');
//驗證碼文本框是否有效
console.log($('#email').validatebox('validate'));
//返回驗證的結果
console.log($('#email').validatebox('isValid'));
//禁用和啟用
$('#email').validatebox('disableValidation');
$('#email').validatebox('enableValidation');
PS：我們可以使用$.fn.validatebox.defaults 重寫默認值對象。
四．自定義驗證
我們可以使用重寫默認規則的方式來創建一個新的規則。
//新增一個規則
$.extend($.fn.validatebox.defaults.rules, {
minLength : {
validator : function (value, param) {
return value.length >= param[0];
},
message : '請長度不小於{0}的字符',
},
});
//調用
$('#email').validatebox({
required : true,
validType : 'minLength[5]',
});