EXTJS 密码确认与验证

extjs 框架是一个非常优秀的前端框架，提供了丰富的功能与炫丽的界面展示，在用　extjs 创建表单时，特别是在注册或修改密码的时候，要对密码进行确认，这里就密码确认一致性验证和大家分享自己的心得与体会。

方法一：主要代码如下

 <script type='text/javascritp>
         // 自定义样式
         var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

         // 定义函数: 验证再次输入的密码是否一致
         Ext.apply(Ext.form.VTypes, {
             confirmPwd: function (value, field) {
              // field 的 confirmPwd 属性
                 if (field.confirmPwd) {
                     var first = field.confirmPwd.first;
                     var second = field.confirmPwd.second;

                     this.firstField = Ext.getCmp('loginPassword');
                     this.seconField = Ext.getCmp('rePassword');
                     var firstPwd = this.firstField.getValue();
                     var secondPwd = this.seconField.getValue();
                     if (firstPwd == secondPwd) {
                         return true;
                     } else {
                         return false;
                     }
                 }
             },
             confirmPwdText:'两次输入的密码不一致！',
         });

         Ext.onReady(function () {
             var formPanel = new Ext.create({
                 xtype: 'form',
                 id: 'multiColumnForm',
                 collapsible: false,
                 frame: true,
                 title: '用户注册表单',
                 bodyPadding: '5 5 0',
                 width: ,
                 fieldsDefaults: {
                     labelAlign: 'top',
                     msgTarget: 'side'
                 },
                 renderTo: 'regist_div',
                 items: [
                     {
                         xtype: 'textfield',
                         id: 'nameText',
                         name: 'nameText',
                         fieldLabel: '用户名',
                         allowBlank: false,
                         tooltip: '请输入您的用户名',
                         afterLabelTextTpl: required,
                         blankText: '请输入您的用户名',
                     },

                     {
                         xtype: 'textfield',
                         inputType: 'password',
                         name: 'loginPassword',
                         id: 'loginPassword',
                         fieldLabel: '密码',
                         tooltip: '请输入密码',
                         afterLabelTextTpl: required,
                         allowBlank: false,
                         blankText: '请输入密码',
                         regex: /^[\s\S]{,}$/,
                         regexText: '密码长度不能超过32个字符',

                     },
                     {
                         xtype: 'textfield',
                         inputType: 'password',
                         name: 'rePassword',
                         id: 'rePassword',
                         vtype:'confirmPwd',
                         fieldLabel: '确认密码',
                         tooltip: '请确认密码',
                         afterLabelTextTpl: required,
                         allowBlank: false,
                         blankText: '确认密码不能为空',
                         regex: /^[\s\S]{,}$/,
                         regexText: '密码长度不能超过32个字符',
                         // 调用密码验证中的定义的属性
                         confirmPwd: {
                             first: 'loginPassword',
                             second:'rePassword'
                         }
                     },
                     {
                         xtype: 'button',
                         name: 'registButton',
                         id: 'registButton',
                         text: '保　存',
                         width: ,
                         height: ,
                         handler: function () {
                             var isValid = this.up('form').getForm().isValid();
 　　　　　　　　　　　　　　if(isValid){
                              // TODO 表单提交到后台处理　

                }　　　　　
                         }
                     },
                     {
                         xtype: 'button',
                         name: 'RegistButton',
                         text: '取　消',
                         width: ,
                         height: ,
                         handler: function () {
                             window.open('/home/index?id=' + new Date());
                         }
                     }]
             });
         });

 </script>

方法二 : 主要 代码如下:

 <script type='text/javascritp>

    // 定义函数: 验证再次输入的密码是否一致
    Ext.apply(Ext.form.VTypes, {
                 password : function(val, field) {
           // field 的  initialPassField 属性
                     if (field.initialPassField) {
                         var pwd = Ext.getCmp(field.initialPassField);
                         return (val == pwd.getValue());
                     }
                     return true;
                 },
                 passwordText : '两次输入的密码不一致!'
             });

         // 创建表单
         Ext.onReady(function () {
             var formPanel = new Ext.create({
                 xtype: 'form',
                 id: 'multiColumnForm',
                 collapsible: false,
                 frame: true,
                 title: '用户注册表单',
                 bodyPadding: '5 5 0',
                 width: ,
                 fieldsDefaults: {
                     labelAlign: 'top',
                     msgTarget: 'side'
                 },
                 renderTo: 'regist_div',
                 items: [
                     {
                         xtype: 'textfield',
                         id: 'nameText',
                         name: 'nameText',
                         fieldLabel: '用户名',
                         allowBlank: false,
                         tooltip: '请输入注册用户名',
                         afterLabelTextTpl: required,
                         blankText: '请输入注册用户名',
                     },

                     {
                         xtype: 'textfield',
                         inputType: 'password',
                         name: 'loginPassword',
                         id: 'loginPassword',
                         fieldLabel: '密码',
                         tooltip: '请输入密码',
                         afterLabelTextTpl: required,
                         allowBlank: false,
                         blankText: '请输入密码',
                         regex: /^[\s\S]{,}$/,
                         regexText: '密码长度不能超过20个字符',

                     },
                     {
                         xtype: 'textfield',
                         inputType: 'password',
                         name: 'rePassword',
                         id: 'rePassword',
                         vtype:'confirmPwd',
                         fieldLabel: '确认密码',
                         tooltip: '请确认密码',
                         afterLabelTextTpl: required,
                         allowBlank: false,
                         blankText: '请确认密码',
                         regex: /^[\s\S]{,}$/,
                         regexText: '密码长度不能超过32个字符',
             initialPassField : 'loginPassword' // 调用密码验证函数中的属性
                     },
                     {
                         xtype: 'button',
                         name: 'registButton',
                         id: 'registButton',
                         text: '保　存',
                         width: ,
                         height: ,
                         handler: function () {
                             var isValid = this.up('form').getForm().isValid();
 　　　　　　　　　　　　　　if(isValid){
                              // TODO 表单提交到后台处理　
                }　　　　　
                         }
                     },
                     {
                         xtype: 'button',
                         name: 'RegistButton',
                         text: '取　消',
                         width: ,
                         height: ,
                         handler: function () {
                             window.open('/home/index?id=' + new Date());
                         }
                     }]
             });
         });
 </script>

 运行效果如下: