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两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
随机推荐
- 添加script标签、添加事件
添加script标签 var _hmt = _hmt || []; (function () { var hm = document.createElement("scr ...
- 树莓派3中没有/dev/video0的解决方法（使用OpenCV编程调用树莓派摄像头的方法）
一.问题 使用下列方法调用OpenCV编程调用树莓派摄像头时总是失败,提示调用Grabber的start()时失败. import org.bytedeco.javacpp.opencv_core; ...
- Python根据多个空格Split字符串
下面的String: 1 沪1 上海市 1850 1350 400 1300 1186/1644(嘉定约100,松江69 奉贤68 2007年上海常住人口1858万人,户籍人口1378.86万人,来沪 ...
- 在Windows服务器上启用TLS 1.2及TLS 1.2基本原理
在Windows服务器上启用TLS 1.2及TLS 1.2基本原理 在Windows服务器上启用TLS 1.2及TLS 1.2基本原理 最近由于Chrome40不再支持SSL 3.0了,GOOGLE认 ...
- CFX构建webservice实例,与Spring整合.
项目结构图: 步骤一: 添加maven包依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu ...
- Spring Boot系列——Spring Boot如何启动
Spring Boot启动过程 上篇<Spring Boot系列--5分钟构建一个应用>介绍了如何快速创建一个Spring Boot项目并运行.虽然步骤少流程简单,为开发者省去了很多重复 ...
- EasyUI - DataGrid 去右边空白滚动条列
在网上查了很长时间没有找到解决方法,干脆自已查看一下代码来解决吧,随是压缩过的,不过也还是好查的,工夫不负有心人,终于解决了,方法如下: 一.我们先让表格自适应宽度 <!DOCTYPE html ...
- 第三部分：Android 应用程序接口指南---第二节：UI---第八章 Toast通知
第8章 Toast通知 Toast通知是在窗口前面弹出的信息.它只占有信息所需要的空间量,并且用户当前的activity仍然是可见的.可互动的.这种通知自动地淡入和淡出,它不接受交互事件.他相当于一种 ...
- 自动化CodeReview - ASP.NET Core依赖注入
自动化CodeReview系列目录 自动化CodeReview - ASP.NET Core依赖注入 自动化CodeReview - ASP.NET Core请求参数验证 我个人比较懒,能自动做的事绝 ...
- 【GMT43智能液晶模块】例程五：IWDG看门狗实验——复位ARM
实验原理: STM32内部包含独立看门狗,通过看门狗可以监控程序运行,程序运行 错误时,未在规定时间喂狗,自动复位ARM.本实验通过UI界面中按钮按下 停止喂狗,制造程序运行错误,从而产生复位. 示例 ...