easy ui 验证框的使用

Easy ui 插件之validatebox

missingMessage:未填写时显示的信息
validType:验证类型见下示例
invalidMessage:无效的数据类型时显示的信息
required="true" 必填项
class="easyui-validatebox" 文本验证
class="easyui-numberbox" 数字验证

required="true" 必填字段invalidMessage="请填写正确的格式"

属性

 1 <form id="itemsForm"  enctype="multipart/form-data" style="padding:10px 20px 10px 40px;">
 2             <p>名称: <input name="name" type="text" class="easyui-validatebox" required="true" missingMessage="商品名称必须填写"></p>
 3             <p>规格: <input name="detail" type="text" class="easyui-validatebox" required="true" ></p>
 4             <p>价格: <input name="price" type="text"  class="easyui-numberbox"  required="true"></p>
 5             <p>日期: <input name="createtime" type="text" class="Wdate" onClick="WdatePicker({ dateFmt: ‘yyyy-MM-dd HH:mm:ss‘ })"></p>
 6              <p>照片:<input class="easyui-filebox" data-options=‘onChange:change_photo‘ id="file_upload" name="items_pic"/><br/>
 7              <div id="Imgdiv">
 8                 <img id="Img" width="200px" height="200px"/>
 9             </div>
10             <div style="padding:5px;text-align:center;">
11                 <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="addItems()">确认</a>
12                 <a href="#" class="easyui-linkbutton" icon="icon-cancel">返回</a>
13             </div>
14         </form>
名称 类型 描述
  • 默认值
required boolean 定义是否字段应被输入。 false
validType string,array 定义字段的验证类型,比如 email、url,等等。可能的值:
1、验证类型字符串,应用单个验证规则。
2、验证类型数组,应用多个验证规则。单个字段上的多个验证规则自版本 1.3.2 起可用。

代码实例:

  1. <input class="easyui-validatebox" data-options="required:true,validType:‘url‘">
  2. <input class="easyui-validatebox" data-options="
  3. required:true,
  4. validType:[‘email‘,‘length[0,20]‘]
  5. ">
null
delay number 延迟验证最后的输入值。该属性自版本 1.3.2 起可用。 200
missingMessage string 当文本框为空时出现的提示文本。 该字段是必需的。
invalidMessage string 当文本框的内容无效时出现的提示文本。 null
tipPosition string 定义当文本框的内容无效时提示消息的位置。可能的值:‘left‘、‘right‘。该属性自版本 1.3.2 起可用。 right
deltaX number 在 X 方向的提示偏移。该属性自版本 1.3.3 起可用。 0
novalidate boolean 当设置为 true 时,则禁用验证。该属性自版本 1.3.4 起可用。 false

原文地址:https://www.cnblogs.com/lrzy/p/8715323.html

时间: 2024-07-30 13:43:16

easy ui 验证框的使用的相关文章

easy ui 弹框叠加问题

1.框架用的是.net MVC,Index页面如下所示: 1 @{ 2 Layout = "~/Views/Shared/_CustomerLayout.cshtml"; 3 ViewBag.Title = "Index"; 4 } 5 <script> 6 7 function LoadContent(contenturl) { 8 $("#rightcontent").load(contenturl); 9 } 10 11 <

jQuery Easy UI Tooptip(提示框)组件

我们都知道DOM节点的title属性,Tooptip组件就是比较强大的title,它可以自由的设置自己的样式.位置以及有自己相关的触发事件. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src=&

easy ui 下拉框绑定数据select控件

easy ui 中的下拉框控件叫做select,具体代码如下: html代码:①.这是一个公司等级的下拉框 <tr> <td>公司等级:</td> <td> <select id="CompanyDegree" style="width: 150px;"> </select></td> <td>上级或同级:</td> <td> <input

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

JQuery Easy Ui (Tree树)详解(转)

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

jQuery Easy UI整理笔记目录

jQuery Easy UI整理笔记目录 ps:最近对Easy UI比较感兴趣,打算系统的学习一下,前面基础部分的东西很简单,都是参照API去写的,例子也就是随便举的,没有列举项目中的实际应用. 打算基础部分后面的知识多投入点时间,多与项目中的实际相结合一些,也尽量多想象出一些应用场景. 计划最慢每周更新一篇文章. 一.基础组件部分 1. jQuery Easy UI的使用 2. jQuery Easy UI Draggable(拖动)组件 3. jQuery Easy UI Droppable

easy UI 注意事项

1.多次使用按钮button. <div id="buttons"> <a id="save_channelD" href="javascript:void(0);" class="easyui-linkbutton" data-options="width:70" onclick="javascript:savechannelD();">保存</a>

easy ui JS 实现Grid

easy ui的grid的实现方式有两种 1.是在网页中实现 (这里不说了 我感觉还是在js中实现操作起来比较方便) 2.在JS中实现 好了我们就来说说如何在JS中实现的GRID 第一步就是我们要引用easy ui 的JS <script type="text/javascript" src="../JS/jquery.min.js"></script> <script type="text/javascript"