文档章节

9.EASYUI ValidateBox 组件

F
 Favour
发布于 2016/08/14 17:45
字数 617
阅读 19
收藏 0
点赞 0
评论 0

一,基本验证框组件 

<%@ 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>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 186
码字总数 96673
作品 0
成都
程序员
easyui-textbox添加正则表达式约束

问题 需要对easyui-textbox输入组件,进行正则表达式约束。 步骤 自定义RE规则 在js文件中添加,如上RE约束。 easyui组件使用RE规则 效果 请输入至少5字符效果图 总结 竟然使用了easy-ui就按...

亚林瓜子
2017/11/21
0
0
jQuery EasyUI 1.3.2 发布

jQuery easyui 为网页开发提供了一堆的常用UI组件,包括菜单、对话框、布局、窗帘、表格、表单等等逐渐, 下图是一个具有布局效果的窗口: jQuery EasyUI 1.3.2 发布了,详细的改进记录: Bu...

夏悸
2013/01/06
6.7K
13
easyUI自定义validatebox.

1 自定义validatebox验证,验证用户名,密码。 2 使用方法 使用方法<form name="_validate" > </form><button onclick="go()">提交</button> 3 javascript 定义验证规则 自定义规则,重载$.f......

ian003
2013/10/18
0
0
jsp form 获取form其中一个输入框的参数

我的代码如下: <% String UserID = request.getParameter("UserID"); String sql = "select from user where userId="+User_ID; ResultSet rs = dbConn.doQuery(sql); if(rs.next()){ %>......

wenwen1
2012/09/04
3.7K
5
jsp jquery怎么在同一个页面写两个 form 同时向数据库的两个表插入数据

<%@ page language="java" import="java.util.,java.sql." pageEncoding="UTF-8"%>

wenwen1
2012/09/03
1K
0
输入框的jquery-easyui-validatebox 验证,只有required,email,url,length可以用,其他的都没反应

在jsp里输入框,用jquery-easyui-validatebox 验证,只有required,email,url,length可以用,其他的都没反应 例如: 1, 这个就可以,会提示必须输入在8到8位之间 2,...

hery186
2017/07/04
54
2
easyui的datagrid中对记录修改,修改后如何显示在前台??

获取修改的记录,修改后按确定后触发editUser(): function editUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $('#bian').dialog('open').dialog('setTitle','编辑账户'......

你我共享世界美好
2014/05/12
2.5K
2
jQuery EasyUI API 中文文档 - 数字框(NumberBox)

NumberBox 数字框 扩展自 $.fn.validatebox.defaults,用 $.fn.numberbox.defaults 重写了 defaults 。 依赖 validatebox 用法 1. 1. $('#nn').numberbox({ 2. min:0, 3. precision:2 4. });......

tinwai
2012/03/19
0
0
jsp 两个页面之间传参

我的MyJsp.jsp如下: <%@ page language="java" import="java.util." import="java.sql." contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%> <%@ page session="true" %>......

wenwen1
2012/09/06
3.7K
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

expect(spawn) 自动化git提交和scp拷贝---centos(linux)

**在进行SCP文件拷贝中,往往需要进行用户密码的输入,即用户交互。若采用自动化脚本的方式进行,则可用以下方式: ** #!/usr/bin/expect #设置参数 set src [lindex $argv 0] set dest [lin...

helplove
5分钟前
1
0
用Build来构建对象的写法

如果一个类的属性过多,用构造器来构建对象很难写,因此我们时用Build方式来构建对象。写法大致如下。 import java.io.Serializable;import java.util.Date;public class Log impleme...

算法之名
8分钟前
11
0
利用 acme.sh 获取网站证书并配置https访问

acme.sh 实现了 acme 协议, 可以从 letsencrypt 生成免费的证书.(https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E) 主要步骤: 安装 acme.sh 生成证书 copy 证书到 nginx/ap...

haoyuehong
21分钟前
2
0
微擎框架内如何根据media_id获取到微信图片的路径

微擎的框架内,图片选择后,获取的是那个字符串是media_id,相当于你这张图片在微信的图片服务器里面的id 要求是:获取https://mmbiz.qpic.cn/mmbiz_jpg/…… 微信图片的路径 而微信并没有根据m...

老bia同学
25分钟前
1
0
Spring boot中日期的json格式化

Model 在model层中,类的日期属性上面添加如下注解: @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd hh:mm:ss") 参考 Jackson Date格式化教程...

亚林瓜子
26分钟前
2
0
Eclipse:Failed to load the JNI shared library

1.问题背景: 由于我之前使用jdk1.9学习,当使用Luke的时候发现jdk版本过高,需要向下配置jdk,就向朋友拷了一个安装包。重新配置路径后,便开始报错。 2.问题描述: Failed to load the JNI...

tinder_boy
29分钟前
1
0
少儿学习编程课程是否真的适合七八岁的低龄儿童[图]

少儿学习编程课程是否真的适合七八岁的低龄儿童[图]: 天下熙熙皆为利来,天下攘攘皆为利往。 这几年来,乐高教育机构在国内如同雨后春笋般出现,当然关闭/转手的也很多。从教师角度来看,部...

原创小博客
34分钟前
1
0
ES12-词项查询

1.词项查询介绍 全文查询将在执行之前分析查询字符串,但词项级别查询将按照存储在倒排索引中的词项进行精确操作。这些查询通常用于数字,日期和枚举等结构化数据,而不是全文本字段。 或者,...

贾峰uk
42分钟前
2
0
http状态码与ajax的状态值

ajax状态值 1.1 200 & OK:状态请求成功

litCabbage
45分钟前
2
0
iOS动画效果合集、飞吧企鹅游戏、换肤方案、画板、文字效果等源码

iOS精选源码 动画知识运用及常见动画效果收集 3D卡片拖拽卡片叠加卡片 iFIERO - FLYING PENGUIN 飞吧企鹅SpriteKit游戏(源码) Swift封装的空数据提醒界面EmptyView 沙盒文件浏览与分享调试控...

sunnyaigd
49分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部