第一种方式:混合写法  
$("#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. 添加script标签、添加事件

    添加script标签 var _hmt = _hmt || [];    (function () {        var hm = document.createElement("scr ...

  2. PL/SQL学习笔记之循环语句

    一:基本循环 LOOP 循环体: 退出循环: )IF condition THEN exit; END IF; ) exit WHEN condition; END LOOP; 二:WHILE循环 W ...

  3. 用命令让vbox的虚拟硬盘文件转换成vmware的vmdk

    VirtualBox的生成备份功能只是个系统还原点 这个生成备份功能备份速度非常快,其实它并不是备份,而是相当于xp系统中的建立系统还原点.但是要注意的是如果你的虚拟硬盘文件(***.vdi)在别的V ...

  4. OpenLayers 官网例子的中文详解

    https://segmentfault.com/a/1190000009679800?utm_source=tag-newest 当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍 ...

  5. 12C -- ORA-01033: ORACLE initialization or shutdown in progress

    初装oracle 12.2 rac数据库. 登录RAC数据库中第1节点 $ sqlplus '/as sysdba' SQL> select name,open_mode from v$pdbs ...

  6. 6.翻译系列:EF 6 Code-First中数据库初始化策略(EF 6 Code-First系列)

    原文链接:http://www.entityframeworktutorial.net/code-first/database-initialization-strategy-in-code-firs ...

  7. Socket网络编程--简单Web服务器(5)

    这一小节我们将实现服务器对get和post的请求进行对cgi程序的调用.对于web服务器以前的章节已经实现了对get和post请求的调用接口,接下来给出对应接口的实现. int WebServer:: ...

  8. 【Tomcat】Servlet 工作原理解析

    Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的 ...

  9. 阿里云 FTP 无法读取目录问题

    安全组除了添加制定 FTP端口外 需要加入再添加1024/65535端口 放行策略,ftp被动模式需要随机开一个此范围端口进行传输 添加安全组规则参考文档:https://help.aliyun.co ...

  10. vue用组件构建应用

    组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用.如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树: 在 Vue 里,一个 ...