第一种方式:混合写法  
$("#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. 学校公文办公处理系统_基于ASP.NET和Swfupload、FlashPaper2.2、校讯通短信发送的开发

    学校新来了一个主管教学的副校长,他对他以前工作学校的公文处理系统表示高度留念,于是乎叫我们也开发一个. 我就参考了那个学校的办公管理系统,发现其实功能也蛮简单的,就是一个文件上传下载的功能,选择用户组 ...

  2. Elasticsearch 开启

    一.知识补充,摘抄,总结 1. Elasticsearch ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.E ...

  3. WEB前端工程师的职业发展路线图、怎样做WEB前端职业规划

    20151028整理 —————————— 知乎-Web前端的路该怎么走?(2015年发表) 在规模越大的团队,工作划分得越细腻,专注的点就越深,但同时就可能会被限制在某个狭窄点上,成为某个角落的技术 ...

  4. C# 读写文件摘要

    主要参考地址:https://www.cnblogs.com/chenyangsocool/p/7511161.html 首先下载微软提供的工具:DsoFile  (微软官网下载传送门) 读写自定义摘 ...

  5. BigDecimal乘法

    BigDecimal result = new BigDecimal(doubleValue).multiply(factor2); public class Payment { BigDecimal ...

  6. mysql8.0.11修改root密码,其他创建用户和删除用户

    1.7. 查询用户密码: 查询用户密码命令:mysql> select host,user,authentication_string from mysql.user; host: 允许用户登录 ...

  7. Atitit 提升进度的大原则与方法  高层方法  attilax总结

    Atitit 提升进度的大原则与方法  高层方法  attilax总结 生产力的提升点 1.1. 管理,管理的发展发展非常缓慢,1 1.2. 方法论(前后分离,dsl等)1 1.3. 工具( 工具链 ...

  8. sql in not in 案例用 exists not exists 代替

    from AppStoke B WHERE B.Opencode=A.Code) in用extist代替 select distinct * from Stoke where Code not in ...

  9. [Big Data - ZooKeeper] ZooKeeper: A Distributed Coordination Service for Distributed Applications

    ZooKeeper ZooKeeper: A Distributed Coordination Service for Distributed Applications Design Goals Da ...

  10. Nginx的upstream目前支持5种分配方式

    本文转自:http://mp.weixin.qq.com/s?__biz=MzI4OTU3ODk3NQ==&mid=2247484058&idx=1&sn=f4da816bfa ...