第一种方式：混合写法  
$("#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验证框的更多相关文章

  1. 表单（上）EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  2. thinkphp处理jQuery EasyUI form表单问题

    jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...

  3. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  4. EasyUI Form表单提交

    转自:https://www.cnblogs.com/net5x/articles/4576926.html Form(表单) 使用$.fn.form.defaults重写默认值对象 form提供了各 ...

  5. 重写form 表单的验证信息

    (function($) { var isformValidationPostBack=true; var isformValidation = false; $.extend({ formValid ...

  6. easyui form表单提交应注意的问题

    今天在一个项目中用到表单提交,代码如下: $('#CreateForm').form('submit', { onSubmit: function () { ajaxCreateFrom(this, ...

  7. form 表单jquery验证插件使用

    第一部分:表单样式 <form action="#" method="post" id="regist">   <tabl ...

  8. （十二）easyUI之表单和验证完成登录页面

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

随机推荐

  1. Windows下如何更新 node.js

    因为在Windows下是没有n模块的并不支持npm install -g n  n latest更新,所以只能老老实实安装 1.在Path环境变量下查看自己的node.js安装路径 计算机-属性-高级 ...

  2. Jquery实现日期转换为 Unix时间戳及时间戳转换日期

    (function ($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: functi ...

  3. Andriod书籍准备

    老大说公司准备开发MFC项目,过了一段时间又说开发Andriod,好吧,我现在准备Andriod. 鬼知道过段时间会变成什么. http://pan.baidu.com/share/link?shar ...

  4. C#中Post请求的两种方式发送参数链和Body的

    POST请求 有两种方式 一种是组装key=value这种参数对的方式 一种是直接把一个字符串发送过去 作为body的方式 我们在postman中可以看到 sfdsafd sdfsdfds publi ...

  5. CorelCAD for Mac（绘图设计软件）破解版安装

    1.软件简介    CorelCAD 是 macOS 系统上的 CAD 绘图工具,为我们提供了获取本地 DWG 格式的高性能 CAD 设计解决方案.打开.处理和保存 .DWG 文件,实现轻松协作.借助 ...

  6. Adobe Photoshop for Mac（图像处理软件）破解版安装

    1.软件简介    Adobe Photoshop(简称 "PS")是 macOS 系统上一款由 Adobe Systems 开发和发行的图像处理软件.Photoshop 主要处理 ...

  7. DNS-320 B2 语言包

    神一样的NAS啊,这个语言包在这里http://tsd.dlink.com.tw/downloads2008detailgo.asp,选择sc的就可以了. 真是神一样的配置~ 佩服死d-link了

  8. Hexo NexT 博客本地搭建指南

    0x01 写在前面的话 第一次见到这个这个Hexo主题,是在查找lucene学习指南时看到了阿里中间件博客,文章写的自然不错,但博客程序主题更是令我喜欢不已. 于是我便萌生了也想撸一个的冲动. 既然想 ...

  9. linux每日命令(16)：head命令

    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾. 一．命令格式: hea ...

  10. docker内程序如何读取dockerfile和compose.yml中设置的环境变量

    docker内程序如何读取dockerfile和compose.yml中设置的环境变量 背景 compose文件中配置了服务A和服务B,其中B服务调用了A服务的接口,那么B的实现代码中该如何调用A的服 ...