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两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
随机推荐
- ubuntu 登陆信息打印 -- motd
新需求需要改变 Ubuntu 启动时的登录信息打印,根据搜索到的资料,找到了这里: luo[~]ssh luo@192.168.100.233 Press ^@ (C-Space) to enter ...
- 【转载】js关闭当前页面(窗口)的几种方式总结
1. 不带任何提示关闭窗口的js代码 复制代码代码如下: <a href="javascript:window.opener=null;window.open('','_self'); ...
- python工具 - 从文件名读取特定信息到excel表格
情景:文件名中包含学号和用户名,其中用户名在前学好在后,学号为2位,如harry33.txt.natasha12.txt. 要求:将多个文件名中的用户名与学号分开并保存到excle中. 代码部分: i ...
- 手动下载python更新后 换回以前版本
因为用的时Ubuntu略低版本的,不想更新版本,但是经常更新内核和其他软件,尤其是最近自己更新python,但是软件更新救出错了,而且不能打开“Languae Support”(软件支持)和ibus输 ...
- RNN，LSTM，GRU简单图解：
一篇经典的讲解RNN的,大部分网络图都来源于此:http://colah.github.io/posts/2015-08-Understanding-LSTMs/ 每一层每一时刻的输入输出:https ...
- linux每日命令(16)：head命令
head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾. 一．命令格式: hea ...
- 省市区三级联动——思路、demo、示例
说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...
- Brainfuck反汇编-高级版(Python)
import re def sym2cal(s): if '>' in s: return len(s) else: return -len(s) def cal(s): if '+' in s ...
- Git 推送操作
Jerry 修改了他的最后一次提交的修改操作,他已经准备好将更改.推操作的数据永久存储的 Git 仓库.推操作成功后,其他开发人员可以看到Jerry 的变化. 他执行的git日志命令来查看提交的细节. ...
- azkaban在centos下的部署安装
azkaban 是一个用Java开发的开源调度工具workflow. 下面介绍具体安装过程,我这里使用的版本是3.43.0,使用的是solo运行模式. 编译 git clone https://git ...