以下是关于 EasyUI jQuery validateBox 小工具的详细攻略:
EasyUI jQuery validateBox 小工具
validateBox 小工具是 EasyUI jQuery 中的一个小部件,用于验证用户输入的文本。它可以设置验证规则、提示信息、验证事件等属性,还可以自定义验证规则和提示信息。
语法
$(selector).validatebox(options);
参数
- options: 一个包含设置选项的对象。
示例一:基本使用
<!DOCTYPE html>
<html>
<head>
<title>EasyUI jQuery validateBox 小工具示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt').validatebox();
});
</script>
</head>
<body>
<input id="tt" class="easyui-validatebox" style="width:200px;">
</body>
</html>
这将创建一个 validateBox 小工具,并使用默认设置。在页面加载时,validateBox 小工具将被创建,并可以输入文本。
示例二:自定义设置
<!DOCTYPE html>
<html>
<head>
<title>EasyUI jQuery validateBox 小工具示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt').validatebox({
required:true,
validType:'email',
missingMessage:'请输入邮箱地址',
invalidMessage:'请输入有效的邮箱地址',
onChange:function(newValue,oldValue){
alert('New Value: '+newValue+', Old Value: '+oldValue);
}
});
});
</script>
</head>
<body>
<input id="tt" class="easyui-validatebox" style="width:200px;">
</body>
</html>
这将创建一个 validateBox 小工具,并自定义设置。在页面加载时,validateBox 小工具将被创建,并可以输入文本。它将设置验证规则、提示信息和验证事件。还可以自定义 onChange 事件。
总结:
validateBox 小工具是 EasyUI jQuery 中的一个小部件,用于验证用户输入的文本。使用 $(selector).validatebox(options); 来创建 validateBox 小工具。可以设置验证规则、提示信息、验证事件等属性,还可以自定义验证规则和提示信息。
以上是关于 EasyUI jQuery validateBox 小工具的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:EasyUI jQuery validateBox小工具 - Python技术站