首页 > Web开发 > 详细

ExtJS中表单验证使用自定义vtype示例

时间:2017-01-12 22:24:27      阅读:189      评论:0      收藏:0      [点我收藏+]
  1. ExtJS中,使用了四种自定义,分别是‘alpha‘,alphanum,‘email‘,‘url‘,分别用来验证表单中的值是否符合字母、字母数字、电子邮件、URL等格式。但在实际应用中,我们需要验证的格式或者规则还是很多的。由于ExtJS是开源的框架,因此,我们可以扩展vtype的功能,实现自定义的vtype
  2. 比如,在实战中,我们经常会遇到需要验证密码的问题,最常使用的,就是如何验证原密码跟重复密码是否一致的问题。为了实现这个功能,我们可以自定义一个vtype,命名为repetition。因此,或以编写扩展代码如下:
  3. Ext.apply(Ext.form.VTypes, {
  4. repetition: function(val, field) {
  5. //代码逻辑在此
  6. },
  7. repetitionText: ‘两个指定组件的组件值不一样‘
  8. })
  9. Ext.apply方法,用以将新属性复制到原对象中,所以, 新的repetition,我们可以以一个JSON配置对象的形式,复制到Ext.form.VTypes中,借此扩展vtype的功能。注意,除了提供repetition的逻辑之外,你还需要提供一个repetitionText,用以实现当验证失败时,返回的错误信息,该信息会显示在组件的提示信息中。格式必须遵循vtypename + ‘Text‘的格式,所以,repetitionvtype,其验证失败信息,就是repetitionText
  10. repetition验证函数也必须遵循一定的参数格式,一共需要提供两个参数,val参数,是宿主表单的的表单值,field是宿主表单自身,所以,我们可以快速地通过这两个参数,访问表单宿主及其表单值,以此来进行验证。
  11. Ext.apply(Ext.form.VTypes, {
  12. repetition: function(val, field) { //返回true,则验证通过,否则验证失败
  13. if (field.repetition) { //如果表单有使用repetition配置,repetition配置是一个JSON对象,该对象提供了一个名为targetCmpId的字段,该字段指定了需要进行比较的另一个组件ID。
  14. var cmp = Ext.getCmp(field.repetition.targetCmpId); //通过targetCmpId的字段查找组件
  15. if (Ext.isEmpty(cmp)) { //如果组件(表单)不存在,提示错误
  16. Ext.MessageBox.show({
  17. title: ‘错误‘,
  18. msg: ‘发生异常错误,指定的组件未找到‘,
  19. icon: Ext.Msg.ERROR,
  20. buttons: Ext.Msg.OK
  21. });
  22. return false;
  23. }
  24. if (val == cmp.getValue()) { //取得目标组件(表单)的值,与宿主表单的值进行比较。
  25. return true;
  26. } else {
  27. return false;
  28. }
  29. }
  30. },
  31. repetitionText: ‘两个指定组件的组件值不一样‘
  32. })
  33. 至此,扩展功能已经结束,我们可以在表单中,使用repetition验证了。
  34. new Ext.form.FieldSet({
  35. title: ‘注册信息‘,
  36. autoHeight: true,
  37. checkboxToggle: true,
  38. labelWidth: 55,
  39. items: [
  40. new Ext.form.TextField({
  41. fieldLabel: ‘Email‘,
  42. vtype: ‘email‘
  43. }),
  44. new Ext.form.TextField({
  45. inputType: ‘password‘,
  46. id: ‘pass1‘,
  47. maxLength: 6,
  48. fieldLabel: ‘输入密码‘,
  49. allowBlank: false
  50. }),
  51. new Ext.form.TextField({
  52. inputType: ‘password‘,
  53. id: ‘pass2‘,
  54. maxLength: 6,
  55. fieldLabel: ‘重复密码‘,
  56. allowBlank: false,
  57. vtype: ‘repetition‘, //指定repetition验证类型
  58. repetition: { targetCmpId: ‘pass1‘ } //配置repetition验证,提供目标组件(表)ID
  59. })
  60. ]
  61. })





ExtJS中表单验证使用自定义vtype示例

原文:http://www.cnblogs.com/minds-hacker/p/6279861.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!