第二十一章：ValidateBox（驗證框）組件
學習要點：
- 加載方式
- 屬性列表
- 方法列表
- 自定義驗證
一、加載方式：
1.class 加載方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="email" class="easyui-validatebox" data-options="required:true,validType:'email'"></div>
</body>
</html>
2.JS調用加載：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="email"></div>
</body>
</html>
$(function(){
$('#email').validatebox({
required:true,
validType:'email',
});
});
二、屬性列表：
| ValidateBox屬性 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| required | boolean | 定義爲必填字段，默認值false |
| ValidType | string，array | 定義字段驗證類型，比如：Email、url、length[0,100]、remote['url','paramname'] |
| delay | number | 延遲到最後驗證輸入值。默認值200 |
| missingMessage | string | 當文本框未填寫時出現的提示信息。默認值：This field is required。 |
| invalidMessage | string | 當文本框的內容被驗證爲無效時出現的提示。默認值：null。 |
| tipPosition | string | 定義文本框的內容無效的時候提示消息顯示的位置。有效的值有：'left','right'。默認值：right。 |
| deltaX | number | 提示框在水平方向上位移，默認值：0。 |
| novalidate | boolean | 爲true時關閉驗證功能。默認值：false。 |
三、方法列表：
| ValidateBox方法 | ||
|---|---|---|
| 方法名 | 傳參 | 說明 |
| options | none | 返回屬性列表 |
| destory | none | 移除並銷燬組件 |
| validate | none | 驗證文本框的內容是否有效 |
| isValid | none | 調用validate方法並且返回驗證結果，true或者false |
| enableValidation | none | 啓用驗證 |
| disableValidation | none | 禁用驗證 |
ps:我們可以使用$.fn.validatebox.defaults重寫默認值對象。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="email" style="margin-left:200px;"></div>
</body>
</html>
$(function(){
$('#email').validatebox({
required:true,
//validType:'email',
//validType:'url',
//validType:'length[2,10]',
//validType:'remote["content.php","abc"]',
//validType:['email','length[5,10]'],
delay:1000,
MissingMessage:'請輸入內容',
invalidMessage:'你輸入的電子郵件不合法',
tipPoistion:'right',
//deltaX:100,
//novalidate:true,
});
//console.log($('#email').validatebox('options'));
//$('#email').validatebox('destory');
/*
$(decument).click(function(){
//console.log($('#email').validatebox('validate'));
console.log($('#email').validatebox('isValid'));
});
*/
$('#email').validatebox('disableValidation');
$('#email').validatebox('enableValidation');
});
<?php
if ($_POST['abc'] == 'Lee'){
echo 'true';
}else{
echo 'false';
}
?>
四、自定義驗證：
我們可以使用重寫默認規則的方式來創建一個新的規則。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="email" style="margin-left:200px;"></div>
</body>
</html>
$(function(){
$.extend($.fn.validatebox.defaults.rules,{
minLength:{
validator:function(value,param){
return value.length >=param[0];
},
message:'請長度不小於{0}的字符',
},
});
$('#email').validatebox({
required:true,
validType:'length[2,10]',
tipPoistion:'right',
});
});
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/102975601
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載