您的位置：首页 > 产品设计 > UI/UE

9.EASYUI ValidateBox 组件

2016-08-14 00:00 363 查看
一，基本验证框组件



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic NumberBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript"
src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript"
src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>

<body>
<h2>基本验证框组件</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>我们可以很方便地添加验证逻辑到文本框里.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="注册" style="width:400px;padding:10px">
<table>
<tr>
<td>用户名:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'email'"></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input class="easyui-datebox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'url'"></td>
</tr>
<tr>
<td>电话:</td>
<td><input class="easyui-validatebox" data-options="required:true"></td>
</tr>
</table>
</div>

</body>
</html>

二，定制验证框提示



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Basic NumberBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="../jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript"
src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript"
src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>定制验证框提示</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>如何在验证框上显示另外一种提示信息.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="注册" style="width:400px;padding:10px">
<table>
<tr>
<td>用户名:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入您的用户名.',required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入一个有效的Email.',required:true,validType:'email'"></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input class="easyui-datebox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入您的URL.',required:true,validType:'url'"></td>
</tr>
<tr>
<td>电话:</td>
<td><input class="easyui-validatebox" data-options="prompt:'请输入您的电话号码.',required:true"></td>
</tr>
</table>
</div>
<script>
$(function(){
$('input.easyui-validatebox').validatebox({
tipOptions: {	// the options to create tooltip
showEvent: 'mouseenter',
hideEvent: 'mouseleave',
showDelay: 0,
hideDelay: 0,
zIndex: '',
onShow: function(){
if (!$(this).hasClass('validatebox-invalid')){
if ($(this).tooltip('options').prompt){
$(this).tooltip('update', $(this).tooltip('options').prompt);
} else {
$(this).tooltip('tip').hide();
}
} else {
$(this).tooltip('tip').css({
color: '#000',
borderColor: '#CC9933',
backgroundColor: '#FFFFCC'
});
}
},
onHide: function(){
if (!$(this).tooltip('options').prompt){
$(this).tooltip('destroy');
}
}
}
}).tooltip({
position: 'right',
content: function(){
var opts = $(this).validatebox('options');
return opts.prompt;
},
onShow: function(){
$(this).tooltip('tip').css({
color: '#000',
borderColor: '#CC9933',
backgroundColor: '#FFFFCC'
});
}
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航