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两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
随机推荐
- Gson解析第三方提供Json数据（天气预报，新闻等）
之前都是自己写后台,自己的server提供数据给client. 近期在看第三方的数据接口,訪问其它站点提供的信息.比方.我们可能自己收集的数据相当有限.可是网上提供了非常多关于天气预报.新闻.星座运势 ...
- phpBB3.2 自动检测浏览器语言
这是根据HTTP request header里的Accept-Language信息来处理的. 首先看一下Accept-Language的格式 Accept-Language: <languag ...
- 你真的了解String的常见API吗？
面试官Q1:请问String常见的方法有哪些,列举几个? String是我们开发中使用频率最高的类,它有哪些方法,大家一定不会陌生,例如: length();//计算字符串的长度 charAt();/ ...
- swift4.0 对 afn 进行二次封装
先将 afn 用pod导入到 工程中 创建一个类 ZHttpTools 继承自 AFHTTPSessionManager 一般我们不希望网络请求同时有多个存在,所以我们将这个工具类 设计成单例 代 ...
- CPP Note
hello.cpp -> 编译代码g++ hello.cpp -o a -> a.out 区分大小写的编程语言 内置类型 一些基本类型可以使用一个或多个类型修饰符进行修饰: signed: ...
- awk的些许小技巧
一句话kill掉名为navimain进程的shell脚本(利用awk的列操作能力) `ps|grep navimain | awk 'NR==1 {print $1}'`
- Android使用腾讯浏览服务X5内核
[前期准备] 腾讯X5 jar包下载地址 [点击打开] 本次完整DEMO源码 [打开Github] [集成步骤] 第一步:下载jar包添加到项目 第二步:添加权限 <uses-permissio ...
- 用.NET CORE做项目，VS里编译碰到‘。。。。包降级。。。。’错误
用.NET CORE做项目,VS里编译碰到‘....包降级....’错误 本地开发机:WIN10+VS2017 15.7.3 ,用CORE2.1版本的建立一个项目,做好了,传到gitee上 今天有新同 ...
- pivot 与 unpivot函数
pivot 与 unpivot函数 pivot 与 unpivot 函数是SQL05新提供的2个函数 灰常灰常的实用 ----------------------------------------- ...
- EXP-00056: ORACLE error 12154 encountered
今天用EXP命令导Oracle数据库,出现如下错误信息: [oracle@yingxiang-testServer1 ~]$ exp imgpf/imgpf@orcl file=/prlife/db/ ...