easyui---表单验证
<%@ 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>
<base href="<%=basePath%>"> <title>My JSP '003.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css"
href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
href="js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript"
src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$.extend($.fn.validatebox.defaults.rules, { namerules : { validator : function(value) {
var str = /^[a-zA-Z0-9_-]{4,16}$/;
return value.match(str); }, message : '4到16位（字母，数字，下划线，减号）' }, minLength : { validator : function(value, param) {
return value.length >= param[0] && value.length<=param[1];
}, message : '' } }); $("#age").numberbox({ min:0,
max:150,
precision:0,
required:true,
missingMessage:"年龄不能为空"
})
$("#birthday").datebox({ required:true,
editable:false }) //日期时间选择
$("#starttime,#endtime").datetimebox({ required:true,
editable:false,
missingMessage:"日期不能为空"
})
})
</script>
</head>
<body>
<div class="easyui-panel" title="新增用户"
style="width: 400px; height: 400px">
<form id="userform">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"
required="true" class="easyui-validatebox" validType="namerules"
invalidMessage="用户名无效" missingMessage="用户名不能为空"
></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password" required="true"
id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" invalidMessage="密码在5到8位之间"
></td>
</tr>
<tr>
<td>性别</td>
<td>男：<input type="radio" name="sex" value="1"> 女：<input
type="radio" name="sex" value="0"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday" id="birthday"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet?method=getcity" valueField="id" textField="name"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="text" name="salary" id="salary" validType="minLength[1000,20500]" invalidMessage="薪水在1000到20500之间" class="easyui-validatebox" required=true missingMessage="薪水不能为空"></td>
</tr>
<tr>
<td>起始时间</td>
<td><input type="text" name="starttime" id="starttime"></td>
</tr>
<tr>
<td>结束时间</td>
<td><input type="text" name="endtime" id="endtime"></td>
</tr>
</table>
<tr colspan="2" align="center">
<td colspan="2"><a class="easyui-linkbutton">点击</a></td>
</tr>
</form>
</div>
</body>
</html>
numberbox组件：上面的年龄的验证 用来验证数字的
$("#age").numberbox({
min:0, 最小值
max:150,最大值
precision:0,小数位
required:true,必填
missingMessage:"年龄不能为空" 必填提示信息
})
datebox组件：验证日期的，上面的生日，弹出一个日历选择框
$("#birthday").datebox({
required:true,
editable:false //input框不可编辑，继承于combo组件，是combo属性
})
datetimebox组件：验证日期带有时间的，依赖于timespinner微调器，所以有时间
//日期时间选择
$("#starttime,#endtime").datetimebox({ required:true,
editable:false,// 依赖于combo,不可编辑
missingMessage:"日期不能为空"
})
combobox组合框组件：使用来异步下拉列表使用，input框声明easyui-combobox,
然后通过url来发送异步请求，获取数据，
<p>Multiple ComboBox: </p>
<input class="easyui-combobox"
name="language"
url="combobox_data.json"
valueField="id"
textField="text"
multiple="true"
panelHeight="auto">
请求数据需要valueFiled ：绑定到 ComboBox 的 value 上的基础数据的名称。相当于select option的value值
textField：绑定到 ComboBox 的 text 上的基础数据的名称。相当于select option的text值，必须json数组传递过来
[{"country":"","id":1,"name":"北京","pro_id":0},{"country":"","id":2,"name":"上海","pro_id":0},{"country":"","id":3,"name":"南京","pro_id":0},{"country":"","id":4,"name":"武汉","pro_id":0},{"country":"","id":5,"name":"天津","pro_id":0}]
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet?method=getcity" valueField="id" textField="name"></td>
或者：
<select id="cc" name="state" style="width:200px;"> </select></td>
$('#cc').combobox({
url:'servlet1/userServlet?method=getcity',
valueField:'id',
textField:'name'
});
使用同一个验证规则时，想提示各自的信息，如下，我想在年龄和薪水都共用一个minLength验证规则，则可以，将message志为空，如下，
然后再各自加上invalidMessage属性，就可以覆盖验证规则message（invalidMessage就是覆盖验证规则message）
$.extend($.fn.validatebox.defaults.rules, {
namerules : {
validator : function(value) {
var str = /^[a-zA-Z0-9_-]{4,16}$/;
return value.match(str);
},
message : '4到16位（字母，数字，下划线，减号）'
},
minLength : {
validator : function(value, param) {
return value.length >= param[0] && value.length<=param[1];
},
message : ''
}
});
<td><input type="text" name="salary" id="salary" validType="minLength[1000,20500]" invalidMessage="薪水在1000到20500之间" class="easyui-validatebox" required=true missingMessage="薪水不能为空"></td>
<td><input type="text" name="password" required="true"
id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" invalidMessage="密码在5到8位之间"
></td>
easyui---表单验证的更多相关文章
- easyui 表单验证validatetype——支持自定义验证
easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ...
- EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证
{ field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...
- easyUI表单验证
1.重写easyui中的 $.extend($.fn.validatebox.defaults.rules, { }) 2.长度重写的方式 1 $.extend($.fn.validatebox.de ...
- 修改 jquery easyui 表单验证默认的样式
目前对于不符合要求的输入域会在右侧显示一个带箭头的提示,可是如果我的输入框比较靠右的话就显示不全了(虽然会出滚动条,但是由于鼠标移开就消失了,所以还是看不到提示内容)! 能不能把这个提示的位置改变一下 ...
- Jquery插件easyUi表单验证提交
<form id="myForm" method="post"> <table align="center" style= ...
- Easyui表单验证扩展
简介: 使用Easyui,我们省了好多事情,不用为UI费心,只需要关注业务层面即可,下面是一些常用的验证方面的扩展,收藏下自己用 //重载$.fn.validatebox.defaults.rules ...
- EasyUI表单验证插件扩展
$.extend($.fn.validatebox.defaults.rules, { regex: { validator: function (value, param) { var regex ...
- atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证
atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...
- atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl窗体身份验证规则
atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...
- vue elementui form表单验证
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
随机推荐
- 使用SpringBoot入门案例
一.创建项目 二.给根项目UnicomCmp的pom.xml,加入parent节点(spring-boot-starter-parent) <!--Add Spring boot Parent- ...
- 【PMP】项目采购管理~重点知识
1.合同的类型与区别 固定总价(FFP):大多数买方都喜欢这种合同,因为货物的采购价格在一开始就已确定,并且不允许改变(除非工作范围发生变更) 总价加激励费用(FPIF):这种总价合同给买方和卖方提供 ...
- Tomcat 七 HTTP 连接器
摘要 本文尝试翻译Tomcat官方文档Apache Tomcat 7连接器,不足之处敬请指正.该文先介绍了Tomcat7 HTTP连接器的属性,包括:公共属性.标准实现.Java TCP套接字属性.B ...
- Swift 模式匹配
前言 在 Swift 中模式匹配是个重要的概念. 最常用的模式匹配是 switch 语法. 模式匹配非常灵活,在使用 switch 进行一轮模式匹配时,不需要所有的 case 都是同一种风格. let ...
- 判断js数组包是否包含某个元素
要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等,我们来造个轮子,名字就山寨PHP的数组函数in_array() Array.prototype.in_array = f ...
- 使用VisualSVN Server搭建SVNserver （Windows环境为例）
使用 VisualSVN Server来实现主要的 SVN功能则要比使用原始的 SVN和Apache相配合来实现源代码的 SVN管理简单的多,下面就看看详细的说明. VisualSVN Server的 ...
- 关于JS拒绝访问错误
错误如图所示,只要点击红色区域 内的任何一部分都会弹出 “js拒绝访问”,以为是浏览器的原因,卸载安装都不好使,左面的是树.点击树的节点弹出右面相应的页面. Node.NavigateUrl = “h ...
- 第三部分：Android 应用程序接口指南---第二节：UI---第十二章 自定义组件
第12章 自定义组件 Android平台提供了一套完备的.功能强大的组件化模型用于搭建用户界面,这套组件化模型以View和 ViewGroup这两个基础布局类为基础.平台本身已预先实现了多种用于构建界 ...
- BW中DSO的分类及应用
1.DSO的分类,标准DSO(生成主数据标识.对于相同关键字段的值进行合并.可直接出具报表).写优化的DSO(不生成主数据标识.不合并相同关键字段的值.速度快可用于存储大容量数据).直接写入的DSO, ...
- 【iCore1S 双核心板_ARM】例程十：SYSTICK定时器实验——定时点亮LED
实验原理: 通过STM32的三个GPIO口驱动三色LED的三个通道,设定GPIO为推挽输出,采用 灌电流的方式与LED连接,输出高电平LED灭,输出低电平LED亮,通过系统定时器实现 1s定时,每秒变 ...