关于ext-js 中的自定义校验 推荐
2013-05-02 10:55
162 查看
项目中遇到了前端校验,我们采用的是用vType来创建可以复用的校验器:
需求:校验IPv32
为了创建可以复用的校验器,我们使用了Vtype,定义如下:
从这段代码可以看出来:
第3行冒号左边的ip表示这个校验器的名字,而右边是一个函数来定义了校验规则, 其中参数v表示被校验的内容。
第4行定义了一个正则表达式,它匹配一个V32的ip地址,我们的校验规则就是让待测的值是否匹配这个正则表达式。
第7行是这个校验出错的提示文本,它会在页面上用红色框子显示出来,对应的样式是x-form-invalid-field.
第8行的正则表达式自动会传递给ext-js的TextField控件,从而在keyPress事件触发时候自动调用从而来限制输入的字符。
为了说明这个校验器如何工作的,我们看下应用代码:
从第13行,可以看出,这里我们对于'IP addres"使用了ip的字段校验器,所以它可以正确的进行字段校验,如果校验结果出错,则会飘红:
![](http://blog.51cto.com/attachment/201305/105434712.png)
需求:校验IPv32
为了创建可以复用的校验器,我们使用了Vtype,定义如下:
// Custom Vtype for ip address Ext.apply(Ext.form.field.VTypes, { ip : function(v) { var reg = /^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$/; return reg.test(v); }, ipText : 'must be numeric, dot - IP adress format', ipMask : /[0-9\.]/i });
从这段代码可以看出来:
第3行冒号左边的ip表示这个校验器的名字,而右边是一个函数来定义了校验规则, 其中参数v表示被校验的内容。
第4行定义了一个正则表达式,它匹配一个V32的ip地址,我们的校验规则就是让待测的值是否匹配这个正则表达式。
第7行是这个校验出错的提示文本,它会在页面上用红色框子显示出来,对应的样式是x-form-invalid-field.
第8行的正则表达式自动会传递给ext-js的TextField控件,从而在keyPress事件触发时候自动调用从而来限制输入的字符。
为了说明这个校验器如何工作的,我们看下应用代码:
initComponent : function() { this.items = [{ xtype : 'displayfield', value : this.sTitle, fieldStyle : 'font-weight:bold;' }, … { fieldLabel : 'IP address', name : 'nodeIp', vtype:'ip', maxLength : 60 }]; this.callParent(arguments); }, });
从第13行,可以看出,这里我们对于'IP addres"使用了ip的字段校验器,所以它可以正确的进行字段校验,如果校验结果出错,则会飘红:
![](http://blog.51cto.com/attachment/201305/105434712.png)
相关文章推荐
- 关于js文本框数字校验
- 【推荐】关于JS中的constructor与prototype【转】
- 关于vue.js过渡css类名的理解(推荐)
- 关于前端js文件校验
- 关于js校验
- 【推荐】关于JS中的constructor与prototype【转】
- 关于js界面库,Ext库实例代码
- 关于saltstack mine自定义收集minion状态及应用场景 推荐
- 关于js校验,检验常见的比如:电话,数字,邮箱,手机号等等
- Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个
- Js自定义对象(推荐)
- 关于js校验,检验常见的比如:电话,数字,邮箱,手机号等等
- 使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)
- 【推荐】关于JS中的constructor与prototype【转】
- Practical Ext JS Projects with Gears中关于Gears描述。
- 关于点击空白关闭弹窗的js写法推荐
- AngularJS Form 进阶:远程校验和自定义输入项
- 给大家推荐一篇关于JS的正则…
- 关于点击空白关闭弹窗的js写法推荐?
- 【推荐】关于JS中的constructor与prototype【转】