easyui---form表单_validatebox验证框
第一种方式：混合写法
$("#password").validatebox({
}) <td><input type="text" name="password" required="true" id="password"></td>
第二种方式：js写法
$("#password").validatebox({
required="true" 注意没有分号；
}) <td><input type="text" name="password" id="password"></td>
第三种方式：html写法 <td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用户名无效"></td>
属性：
required="true"：定义是否字段应被输入，默认false，missingMessage可以改变内容
validType 是验证规则：
验证规则是通过使用 required 和 validType 特性来定义的， 这里是已经实施的规则：
- email：匹配 email 正则表达式规则
- url：匹配 URL 正则表达式规则
- length[0,100]：允许从 x 到 y 个字符
- remote['http://.../action.do','paramName']：发送 ajax 请求来验证值，成功时返回 'true' 。
自定义验证规则，重写 $.fn.validatebox.defaults.rules ：
namerules是自定义的名字，用在validType里面
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
namerules: {
validator: function(value){
var str= /^[a-zA-Z0-9_-]{4,16}$/;
return value.match(str); //return true规则生效
},
message: '4到16位（字母，数字，下划线，减号）' //message就是不满足验证规则下面框的内容 ，如果required=true,那么一开始就有验证框必填，missingMessage可以改变内容，属性invalidMessage会覆盖验证规则中message
下面就是覆盖了，所以是用户名无效，不然是 ’4到16位（字母，数字，下划线，减号）’
invalidMessage作用：当重用验证规则时，提示信息会不一样，这时可以invalidMessage
<td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用户名无效"></td>
},
//多个验证规则，直接在后面添加
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.' //
}
});
<%@ 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 : '大于5小于8位' } }); })
</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="密码不能为空"
></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"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="text" name="salary"></td>
</tr>
<tr>
<td>起始时间</td>
<td><input type="text" name="starttime"></td>
</tr>
<tr>
<td>结束时间</td>
<td><input type="text" name="endtime"></td>
</tr>
</table>
<tr colspan="2" align="center">
<td colspan="2"><a class="easyui-linkbutton">点击</a></td>
</tr>
</form>
</div>
</body>
</html>
easyui---form表单_validatebox验证框的更多相关文章
- 表单（上）EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
- thinkphp处理jQuery EasyUI form表单问题
jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...
- 深入了解Element Form表单动态验证问题 转载
随风丶逆风 2020-04-03 15:36:41 2208 收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...
- EasyUI Form表单提交
转自:https://www.cnblogs.com/net5x/articles/4576926.html Form(表单) 使用$.fn.form.defaults重写默认值对象 form提供了各 ...
- 重写form 表单的验证信息
(function($) { var isformValidationPostBack=true; var isformValidation = false; $.extend({ formValid ...
- easyui form表单提交应注意的问题
今天在一个项目中用到表单提交,代码如下: $('#CreateForm').form('submit', { onSubmit: function () { ajaxCreateFrom(this, ...
- form 表单jquery验证插件使用
第一部分:表单样式 <form action="#" method="post" id="regist"> <tabl ...
- （十二）easyUI之表单和验证完成登录页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Vue Element Form表单时间验证控件使用
如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...
随机推荐
- Linux cut命令用法
cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整篇信息分析的. (1)其语法格式为: cut [-bn] [file] 或 cu ...
- Shell脚本高级编程笔记一
http://www.cnblogs.com/ygj0930/p/8184277.html 一:函数 1:创建函数 法一: function name{ commands } 法二: name() ...
- wine qq 2013 for linux deb包 Ubuntu 64位兼容
2013-08-08 Wine 1.6,如果您想体验下该版本的wine,目前可以通过ppa进行安装: sudo add-apt-repository ppa:ubuntu-wine/ppa ...
- ORA-214 signalled during: ALTER DATABASE MOUNT 问题
数据库服务器移动了位置,后来再连其数据库发现提示无法连接,大致为“无法为所有新实例创建连接...”,查看alert日志发现有如下错误: starting up 1 dispatcher(s) for ...
- 目标检测比赛---Google AI Open Images - Object Detection Track
https://www.kaggle.com/c/google-ai-open-images-object-detection-track#Evaluation Submissions are eva ...
- Android使用腾讯浏览服务X5内核
[前期准备] 腾讯X5 jar包下载地址 [点击打开] 本次完整DEMO源码 [打开Github] [集成步骤] 第一步:下载jar包添加到项目 第二步:添加权限 <uses-permissio ...
- 【原】使用Json作为Python和C#混合编程时对象转换的中间文件
一.Python中自定义类对象json字符串化的步骤[1] 1. 用 json 或者simplejson 就可以: 2.定义转换函数: 3. 定义类 4. 生成对象 5.dumps执行,引入转换函 ...
- JVM内存管理及垃圾回收【转】
很多Java面试的时候,都会问到有关Java垃圾回收的问题,提到垃圾回收肯定要涉及到JVM内存管理机制,Java语言的执行效率一直被C.C++程序员所嘲笑,其实,事实就是这样,Java在执行效率方面确 ...
- iOS系统及客户端软件测试的基础介绍
iOS系统及客户端软件测试的基础介绍 iOS现在的最新版本iOS5是10月12号推出,当前版本是4.3.5 先是硬件部分,采用iOS系统的是iPad,iPhone,iTouch这三种设备,其中iPho ...
- Git -- 使用GitHub
我们一直用GitHub作为免费的远程仓库,如果是个人的开源项目,放到GitHub上是完全没有问题的.其实GitHub还是一个开源协作社区,通过GitHub,既可以让别人参与你的开源项目,也可以参与别人 ...