Ext做密码验证

1.完全从Ext的example包中发现的

2.js

   /*
 * Password Verification
 * @author xi
 * @created on Oct 31 2008, 03:13 PM
 */

// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    //增加密码的验证
  password: function(val, field) {
    if (field.initialPassField) {
      var pwd = Ext.getCmp(field.initialPassField);
      return (val == pwd.getValue());
    }
    return true;
  },
 
  passwordText: 'Passwords do not match'
});


Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Password Verification =======================
     */
       
    var pwd = new Ext.FormPanel({
      labelWidth: 125,
      frame: true,
      title: 'Password Verification',
      bodyStyle:'padding:5px 5px 0',
      width: 350,
      defaults: {
        width: 175,
        inputType: 'password'
      },
      defaultType: 'textfield',
      items: [{
        fieldLabel: 'Password',
        name: 'pass',
        id: 'pass'
      },{
        fieldLabel: 'Confirm Password',
        name: 'pass-cfrm',
        vtype: 'password',
        initialPassField: 'pass' // id of the initial password field
      }]
    });

    pwd.render('pw');
});

 

3.html页面

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Advance Form Example2</title>
        <link rel="stylesheet" type="text/css"
            href="resources/extjs/resources/css/ext-all.css" />
        <script type="text/javascript"
            src="resources/extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="resources/extjs/ext-all.js"></script>
        <script type="text/javascript" src="resources/js/pwdValidate.js"></script>
    </head>
    <body>
        <div id="pw" style="padding-top:20px">
    </body>
</html>

 

4.不正确的页面

   参看not-match

5.正确的页面

   参看match

发布了38 篇原创文章 · 获赞 0 · 访问量 1761
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章