<%@ 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---表单验证的更多相关文章

  1. easyui 表单验证validatetype——支持自定义验证

    easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ...

  2. EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  3. easyUI表单验证

    1.重写easyui中的 $.extend($.fn.validatebox.defaults.rules, { }) 2.长度重写的方式 1 $.extend($.fn.validatebox.de ...

  4. 修改 jquery easyui 表单验证默认的样式

    目前对于不符合要求的输入域会在右侧显示一个带箭头的提示,可是如果我的输入框比较靠右的话就显示不全了(虽然会出滚动条,但是由于鼠标移开就消失了,所以还是看不到提示内容)! 能不能把这个提示的位置改变一下 ...

  5. Jquery插件easyUi表单验证提交

    <form id="myForm" method="post"> <table align="center" style= ...

  6. Easyui表单验证扩展

    简介: 使用Easyui,我们省了好多事情,不用为UI费心,只需要关注业务层面即可,下面是一些常用的验证方面的扩展,收藏下自己用 //重载$.fn.validatebox.defaults.rules ...

  7. EasyUI表单验证插件扩展

    $.extend($.fn.validatebox.defaults.rules, { regex: { validator: function (value, param) { var regex ...

  8. atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证

    atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...

  9. atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl窗体身份验证规则

    atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...

  10. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

随机推荐

  1. 在Linux平台上搭建EasyDarwin，编译代码并简单部署

    測试环境: Ubuntu gcc / g++ 从https://github.com/EasyDarwin/EasyDarwin下载代码 1.编译 第一步:进入源码文件夹下 cd ./EasyDarw ...

  2. vim 支持 nginx配置文件 语法高亮

    1.下载 nginx.vim 语法高亮文件 2.将文件复制到 /usr/share/vim/vim74/syntax 目录(也可以是 单用户目录 ~/.vim/syntax/) 3.修改 vim /u ...

  3. 一篇文章让你读懂iOS和Android的历史起源

    智能手机虽说是移动电话,但我们完全可以将其作为小型化的电脑来思考.这样一来也能够显示出智能手机OS的高性能.我们首先一起来回顾下智能手机OS的历史. OS的黎明期 其实在很早之前就已经有这样的想法,即 ...

  4. Asp.Net WebAPI及相关技术介绍（含PPT下载）

    此PPT讲述了Asp.Net WebAPI及相关Web服务技术发展历史. 共80多页,Asp.Net WebAPI在讲到第36页的时候才会出现,因为这个技术不是凭空产生的,它有着自己的演变进化的历史. ...

  5. iOS 版本更新(强制更新)检测问题

    iOS 版本更新(强制更新)检测问题 通常iOS系统中是默认设置再wifi状态,且网络状况良好下自己更新应用的. 但是如果用户设置了不自动更新,但是我们的APP出现重要的版本,一定需要用户更新的情况下 ...

  6. Linux下ip地址查询

    [时间:2016-12] [状态:Open] [关键词:linux,ip地址,ifconfig,ip addr] 0 引用 说起来比较搞笑,我在windows下知道可以使用ipconfig命令查询本机 ...

  7. Numpy数组与PIL Image转换

    引用于这个博客

  8. CSS实现响应式全屏背景图

    body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...

  9. Swagger使用小记

    Swagger是一种框架,用于自动生成Restfull API的文档,而不用开发者自己编写文档.它既可以减少我们创建文档的工作量,同时说明内容又整合入实现代码中,让维护文档和修改代码整合为一体,可以让 ...

  10. winform利用ImageList控件和ListView控件组合制作图片文件浏览器

    winform利用ImageList控件和ListView控件组合制作图片文件浏览器,见图,比较简单,实现LISTVIEW显示文件夹图片功能. 1.选择文件夹功能代码: folderBrowserDi ...