jQuery easyui的validatebox校验规则扩展及easyui校验框

深入jQuery EasyUI的ValidateBox校验规则扩展及应用

在Web项目中，数据校验是不可或缺的一环。前端数据校验能够提升用户体验，减少不必要的服务端压力。在众多前端校验组件中，EasyUI的ValidateBox插件因其友好的提示界面而备受青睐。ValidateBox默认的校验规则有时不能满足我们的特定需求，这时就需要我们进行扩展。

让我们欣赏一下使用ValidateBox进行数据校验的生动显示效果。在Form表单中，input文本框是最常用的元素。用户可能会输入不符合规定的数据。我们的扩展校验规则就会发挥重要作用。

对于自定义校验规则的添加，我们并不建议在EasyUI的源文件中进行。这样做不仅可能污染EasyUI的源码，而且不利于未来的组件升级。最好的办法是单独编写自己的扩展文件。

以下是几个常见的自定义校验规则示例：

1. 格式校验：

```javascript

email: {

validator: function(value) {

// 使用正则表达式测试格式

return /^[\w-]+(\.[\w-]+)@[\w-]+(\.[\w-]+)+$/.test(value);

},

message: 'Please enter a valid email address.'

}

```

2. URL格式校验：

```javascript

url: {

validator: function(value) {

// 使用正则表达式测试URL格式

return /^https?:\/\/\w+(\.\w+)+(\/?\S)?$/.test(value);

},

message: 'Please enter a valid URL.'

}

```

3. 长度校验：

```javascript

length: {

validator: function(value, param) {

var len = $.trim(value).length;

return len >= param[0] && len <= param[1];

},

message: 'Please enter a value between {0} and {1}.'

}

```

还有远程校验规则（remote），它允许我们调用服务端接口进行数据校验。具体的实现方式这里不再赘述。通过这些自定义校验规则，我们可以轻松扩展ValidateBox的功能，满足各种数据校验需求。

新增三项校验规则于EasyUI框架中

在原有规则的基础上，我新增了三项校验规则，并单独存放于文件easyui-extend-rcm.js中。以下是具体的实现细节。

（函数开始）

jQuery EasyUI 1.4 —— 功能扩展

（c）2009-2015 RCM

新增validatebox校验规则

在此，我们利用jQuery的$.extend方法扩展了$.fn.validatebox.defaults.rules对象，添加了三个新的校验规则：

1. idcard规则：用于验证身份证号码。通过idCardNoUtil.checkIdCardNo(value)方法进行校验。

2. checkNum规则：用于验证整数。通过正则表达式/^([0-9]+)$/进行校验。

3. checkFloat规则：用于验证合法数字，包括整数和小数。通过正则表达式/^[-|+]?([0-9]+\.[0-9]+|[0-9]+)$/进行校验。

自定义规则使用方式：

在HTML文件的部分，除了引入EasyUI的相关文件外，还需要引入自定义的扩展文件easyui-extend-rcm.js，且该文件的引入顺序应在EasyUI文件之后。例如：

然后在HTML中按照如下方式引用即可，注意要添加Class和data-options两个属性。例如：

详解jQuery easyui校验框（ValidateBox）的用法：

jQuery EasyUI的验证框（ValidateBox）为表单验证提供了便捷的方法。例如：

其中，主要的属性有：

required：布尔值，定义文本域是否为必填项。

validType：字符串，定义字段的验证类型，如email、url等。

missingMessage：当文本框为空时提示的文本信息。

invalidMessage：当文本框内容不合法时提示的文本信息。

除了required属性外，如果validType属性验证失败，它并不会阻止表单提交。如果要阻止表单提交，我们需要利用jQuery UI的表单提交方法。具体写法是：