`

EasyUI DataGrid 编辑数据 加邮箱验证 Input 邮箱验证

 
阅读更多

 

DataGrid:
JSP:
<th data-options="field:'email_mail',width:465,editor:'validatebox', editor:{type:'validatebox',options:{required:true,validType:'email'}}">邮箱</th>

JS:
columns:[[
                    {field:'no',title:'编号',width:50,editor:'numberbox'},
                    {field:'name',title:'名称',width:60,editor:'text'},
                    {field:'addr',title:'地址',width:100,editor:'text'},
                    {field:'email',title:'电子邮件',width:100,
                        editor:{
                            type:'validatebox',
                            options:{
                                validType:'email'
                            }
                        }
                    },
                    {field:'birthday',title:'生日',width:80,editor:'datebox'},
                    {field:'action',title:'操作',width:70,align:'center',
                        formatter:function(value,row,index){
                            if (row.editing){
                                var s = '<a href="#" onclick="saverow('+index+')">保存</a> ';
                                var c = '<a href="#" onclick="cancelrow('+index+')">取消</a>';
                                return s+c;
                            } else {
                                var e = '<a href="#" onclick="editrow('+index+')">编辑</a> ';
                                var d = '<a href="#" onclick="deleterow('+index+')">删除</a>';
                                return e+d;
                            }
                        }
                    }
                ]],
				
				
validType:'email' 为邮箱验证
required:true 为必输项


input:
<input class="easyui-validatebox" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />  

或
 <script>  
        $(function () {  
            //设置text需要验证  
            $('input[type=text]').validatebox();  
        })  
 </script> 
 <input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" />

 

分享到:
评论

相关推荐

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui datagrid在编辑状态下更新列的值

    在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地修改列的值,以及确保在编辑结束后,保存的数据反映这些变更。以下将详细介绍这一过程。 首先,EasyUI的...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    EasyUI DataGrid过滤用法实例

    在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能,帮助用户更高效地查找和管理表格中的信息。 首先,`datagrid-filter.js` 文件很可能包含了实现过滤...

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    ### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...

    easyui的datagrid的数据渲染

    easyui的datagrid的数据渲染

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    在描述中提到的"Editable DataGrid",指的是DataGrid组件的一个增强功能,允许用户直接在表格内进行数据编辑。 DataGrid是EasyUI中的核心组件之一,用于展示和管理大量结构化的数据。在默认情况下,DataGrid只是...

    easyui datagrid 右冻结

    EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的组件。在某些场景下,用户可能希望在滚动表格时,某些重要的列(通常是标题或标识列)始终保持可见,这就是“右冻结”的...

    easyUI datagrid rownumber自适应宽度扩展JS

    easyUI datagrid 自动调整行号大小

    easyui datagrid 增加鼠标悬停弹窗事件

    EasyUI的Datagrid是一个强大的表格组件,它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中,Datagrid常用于展示结构化的数据,使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**: 在...

    easyui DataGrid动态编辑

    理解并熟练运用这些配置和方法,你就能创建出具有高效数据编辑功能的用户界面。在实际项目中,根据需求,你可能还需要处理更多的细节,比如错误处理、异步加载数据、分页和排序等。记住,不断实践和调试是掌握这些...

    easyUI datagrid 行上移,下移,置顶,置底的方法

    easyUI datagrid 行上移,下移,置顶,置底的方法

    jquery easyui datagrid demo

    Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和操作,支持分页、排序、过滤、编辑等功能。通过阅读这份文档,我们可以了解 Datagrid 的基本配置和高级特性,以及如何与后端数据源进行...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    easyui datagrid 分页查询样例

    EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如表格布局、数据分页、排序、过滤等,常用于Web应用的数据展示。在本项目中,"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    首先,`datagrid`是EasyUI中的一个核心组件,它用于展示数据表格,支持分页、排序、过滤等多种操作。在实现多条件筛选时,我们需要对datagrid的`columns`属性进行配置,定义每一列的显示方式和筛选条件。例如,我们...

Global site tag (gtag.js) - Google Analytics