JQ easyui实现自定义validatebox验证规则== 正则匹配

前文

目前还在使用JQ easyui维护着老版本的前端页面，后面也会陆续用vue来替代吧，这里记录一个需求：当使用JQ的datagrid时候，会需要对字段进行验证，而一般我们启动编辑需要用到editor，官方提供了type为validatebox的编辑器，并且支持如email、url、length等基本的长度验证，参考链接如下：easyui datagrid官网。
截图如下：
JQ easyui实现自定义validatebox验证规则==>正则匹配
ok，回到需求上，这些验证对我们要定制的验证肯定不匹配，最好能用正则，比如说字段只允许数字,小写字母和下划线，网上查了很多资料，大部分围绕源码来改，我是觉得太复杂了，而官网又没查到提供可以自定义的class或者data-options(如果查到的小伙伴可以通知我，谢谢)，后面在一篇博客里找到了方法：http://www.voidcn.com/article/p-uiyafcfy-oe.html

解决方法

先看下我的datagrid是怎么设计的，代码如下：

<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" data-options="
                                            iconCls: 'icon-edit',
                                            singleSelect: true,
                                            toolbar: '#tb',
                                            onClickCell: onClickCell,
                                            onDblClickCell: onDblClickCell,
                                            onEndEdit: onEndEdit
                                        ">
                                    <thead>
                                        <tr>
                                        	<th data-options="field:'fieldName',width:80, align:'left',editor:{type:'textbox',options:{required:true,validType:'field_validate'}}" id="table_field">名称</th>
                                            <th data-options="field:'comment',		width:171,align:'left',editor:{type:'textbox',options:{required:true}}">注释</th>
                                        </tr>
                                    </thead>
                                </table>

可以看到就是基本的datagrid设计，这里用到了editor来编辑行，而需要注意的是，要用到正则匹配就不需要用validatebox了，用textbox就行，然后在options里填上validType，代码的field_validate是函数名，需要在js上拓展函数，具体如下：

<script type="text/javascript">
// 添加数据字段正则验证
        $.extend($.fn.validatebox.defaults.rules, {
            field_validate: {
                validator: function(value, param){
                    return /^[0-9a-z][0-9a-z_]{0,}$/.test(value);
                },
                message: '字段只包含数字,小写字母和下划线'
            }
        })
</script>

这样便完成了数据字段的验证，并且不只是应用在editor里面，凡是textbox的都能应用，比如定义一个input字段，要采取自定义验证的话也能应用，比如：

<div style="padding:10px;">
    <input id="name" class="easyui-textbox" name="name" val="" create_alter="" style="width:200px; padding: 10px;" labelWidth="50px" data-options="label:'表名:',required:true,validType:'table_validate'">
</div>
<script type="text/javascript">
// 添加数据字段正则验证
        $.extend($.fn.validatebox.defaults.rules, {
            table_validate: {
                validator: function(value, param){
                    return /^[0-9a-z][0-9a-z_]{0,}$/.test(value);
                },
                message: '字段只包含数字,小写字母和下划线'
            }
        })
</script>

告警提示如下：
JQ easyui实现自定义validatebox验证规则==>正则匹配

总结

感谢观看，下回再见~