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
