ZUL File
<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:c="client">
<window border="normal" id="setuserpassword" apply="com.elitecore.wom.web.system.user.SetPasswordComposer">
<div sclass="viewActionTitle"><label value="" style="font-weight: bold;" id="divLabel"/></div>
<grid width="800px" sclass="form-grid" style="border: 0px;" oddRowSclass="non-odd" id="passwordgrid">
<columns>
<column width="250px"></column>
<column width="250px"></column>
</columns>
<rows>
<row align="top">
<label value="${labels.sp.newpassword}"/>
<textbox id="newpassword" type="password" width="150px" maxlength="20"
constraint="no empty, /((?=.\d)(?=.[A-Z])(?=.*[\W_]).

{8,20})/ : Password should contain minimum 8 maximum 20 characters, atleast 1 special, 1 uppercase and 1 numeric character" instant="true">
<attribute c:name="onChange">
<![CDATA[
var button = this.$f('btnSetPassword');
var reTypePassTextbox = this.$f('confirmpassword');
var passTextbox = this.$f('newpassword');
var valLabel = this.$f('pwd_val1');
valLabel.setValue('Not Match !');
if(passTextbox.getValue().length != 0){
button.setDisabled(true);
if(reTypePassTextbox.getValue().length != 0 ){
if(passTextbox.getValue() == reTypePassTextbox.getValue()){ button.setDisabled(false); valLabel.setValue('OK !'); }else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
}else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
}else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
]]>
</attribute>
</textbox>

</row>
<row align="top">
<label value="${labels.sp.confirmpassword}"/>
<hlayout>
<textbox id="confirmpassword" type="password" width="150px"
maxlength="20" constraint="no empty" instant="true">
<attribute c:name="onChange">
<![CDATA[
var button = this.$f('btnSetPassword');
var reTypePassTextbox = this.$f('confirmpassword');
var passTextbox = this.$f('newpassword');
var valLabel = this.$f('pwd_val1');
if(passTextbox.getValue().length != 0){
button.setDisabled(true);
if(reTypePassTextbox.getValue().length != 0 ){
if(passTextbox.getValue() == reTypePassTextbox.getValue()){ button.setDisabled(false); valLabel.setValue('OK !'); }else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
}else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
}else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
]]>
</attribute>
</textbox>
<label id="pwd_val1" value="" />
<image id="image"/>
</hlayout>
</row>
</rows>
</grid>
<div align="center"><label id="expirymessage" style="font-size:12pt;color:red"></label></div>

<separator bar="false" />
<separator bar="false" />
<separator bar="false" />
<hbox>
<button id="btnSetPassword" type="button" label="${labels.sp.changepassword}" mold="trendy"/>
<button label="Cancel" onClick="setuserpassword.detach()" mold="trendy"/>
</hbox>

<separator bar="false" />
</window>
</zk>

Display on Google Chrome (v20.0.1132.47))

<link rel="stylesheet" type="text/css" href="/cwomweb/zkau/web/9402b7cd/zul/css/zk.wcs"/>

<script type="text/javascript" src="/cwomweb/zkau/web/9402b7cd/js/zk.wpd" charset="UTF-8">
</script>
<script type="text/javascript" src="/cwomweb/zkau/web/9402b7cd/js/zul.lang.wpd" charset="UTF-8">
</script>
<!-- ZK 6.0.0 2012021410 -->
<script type="text/javascript">zkopt({kd:1,ppos:'center'});</script><div id="pCfU_" class="z-temp"></div>
<script type="text/javascript">zkmx(
[0,'pCfU_',{dt:'z_ds50',cu:'/cwomweb',uu:'/cwomweb/zkau',ru:'/WEB-INF/pages/system/user/set-password.zul',style:'width:100%;',ct:true},[
['zul.wnd.Window','pCfU0',{id:'setuserpassword',$$onSize:false,$$onMaximize:false,$$onOpen:false,$$onMinimize:false,$$onZIndex:false,$onClose:true,$$onMove:false,prolog:'\n',border:'normal'},[
['zul.wgt.Div','pCfU1',{sclass:'viewActionTitle',prolog:'\n'},[
['zul.wgt.Label','pCfU2',{id:'divLabel',style:'font-weight: bold;'},[]]]],
['zul.grid.Grid','pCfU3',{id:'passwordgrid',$$onRender:true,$$onDataLoading:true,$$onInnerWidth:false,$$onPageSize:true,$$onScrollPos:false,width:'800px',sclass:'form-grid',style:'border: 0px;',prolog:'\n',oddRowSclass:'non-odd',_topPad:0,emptyMessage:null,_totalSize:2,_offset:0},[
['zul.grid.Columns','pCfU4',{$$onColSize:false},[
['zul.grid.Column','pCfU5',{$onSort:true,$onGroup:true,width:'250px'},[]],
['zul.grid.Column','pCfU6',{$onSort:true,$onGroup:true,width:'250px'},[]]]],
['zul.grid.Rows','pCfU7',{_offset:0,visibleItemCount:2},[
['zul.grid.Row','pCfU8',{align:'top',_index:0},[
['zul.wgt.Label','pCfU9',{value:'New Password'},[]],
['zul.inp.Textbox','pCfUa',{id:'newpassword',$$onError:false,$$onChange:false,listeners:{onChange:function(event){


var button = this.$f('btnSetPassword');
var reTypePassTextbox = this.$f('confirmpassword');
var passTextbox = this.$f('newpassword');
var valLabel = this.$f('pwd_val1');
valLabel.setValue('Not Match !');
if(passTextbox.getValue().length != 0){
button.setDisabled(true);
if(reTypePassTextbox.getValue().length != 0 ){
if(passTextbox.getValue() == reTypePassTextbox.getValue()){ button.setDisabled(false); valLabel.setValue('OK !'); }else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
}else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }
}else{ valLabel.setValue('Not Match !'); button.setDisabled(true); }


}},width:'150px',maxlength:20,instant:true,constraint:'no empty, /((?=.
d)(?=.[A-Z])(?=.*\\W_).{8,20}

)/ : Password should contain minimum 8 maximum 20 characters, atleast 1 special, 1 uppercase and 1 numeric character',type:'password'},[]]]],
['zul.grid.Row','pCfUb',

{align:'top',_index:1}

,[
['zul.wgt.Label','pCfUc',

{value:'Confirm Password'}

,[]],
['zul.box.Hlayout','pCfUd',{},[
['zul.inp.Textbox','pCfUe',{id:'confirmpassword',listeners:{onChange:function(event){

var button = this.$f('btnSetPassword');
var reTypePassTextbox = this.$f('confirmpassword');
var passTextbox = this.$f('newpassword');
var valLabel = this.$f('pwd_val1');
if(passTextbox.getValue().length != 0){
button.setDisabled(true);
if(reTypePassTextbox.getValue().length != 0 ){
if(passTextbox.getValue() == reTypePassTextbox.getValue())

{ button.setDisabled(false); valLabel.setValue('OK !'); }

else

{ valLabel.setValue('Not Match !'); button.setDisabled(true); }

}else

{ valLabel.setValue('Not Match !'); button.setDisabled(true); }

}else

{ valLabel.setValue('Not Match !'); button.setDisabled(true); }

}},width:'150px',maxlength:20,instant:true,constraint:'no empty',type:'password'},[]],
['zul.wgt.Label','pCfUf',

{id:'pwd_val1'}

,[]],
['zul.wgt.Image','pCfUg',

{id:'image',src:'/cwomweb/zkau/web/9402b7cd/img/spacer.gif'}

,[]]]]]]]]]],
['zul.wgt.Div','pCfUh',

{prolog:'\n',align:'center'}

,[
['zul.wgt.Label','pCfUi',

{id:'expirymessage',style:'font-size:12pt;color:red'}

,[]]]],
['zul.wgt.Separator','pCfUj',

{prolog:'\n\t\t\n',orient:'horizontal'}

,[]],
['zul.wgt.Separator','pCfUk',

{prolog:'\n ',orient:'horizontal'}

,[]],
['zul.wgt.Separator','pCfUl',

{prolog:'\n ',orient:'horizontal'}

,[]],
['zul.box.Box','pCfUm',

{prolog:'\n '}

,[
['zul.wgt.Button','pCfUn',

{id:'btnSetPassword',$onClick:true,label:'Set Password'}

,[],'trendy'],
['zul.wgt.Button','pCfUo',{$onClick:true,label:'Cancel'},[],'trendy']],'horizontal'],
['zul.wgt.Separator','pCfUp',

{prolog:'\n\n ',orient:'horizontal'}

,[]]]]]]);
</script>
<noscript>
<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then <a href="">try again</a>.</p></div>
</noscript>

Although it works fine with Firefox and IE.