jsf标签 验证器的使用

jsf验证器+正则表达式验证 密码，两次密码是否一致功能。

需求说明：

1，密码和确认后面显示（由10-15位字母或数字组成）

2，两次密码不一致时在确认密码后提示

3，更改内容后验证通过再次提示信息（由10-15位字母或数字组成）

实现代码

1，页面代码

<span style="font-size:18px;"><h:form id="userForm">
	<h:panelGrid id="info" cellpadding="2" cellspacing="2" columns="3">
		<h:outputText value="密码"/>
		<h:inputSecret id="pswd" style="white-space:nowrap" requiredMessage="必填"
	validatorMessage="由10-15位字母或数字组成" onblur="check();">
			<rich:validator/>
			<f:validateRegex pattern="^[A-Za-z0-9]{10,15}$"/>
		</h:inputSecret>
		<rich:message id="passwordMsg" for="pswd" style="color:gray;"/>

		<h:outputText value="确认密码"/>
		<h:inputSecret id="repswd" style="white-space:nowrap" requiredMessage="必填"
	validatorMessage="由10-15位字母或数字组成" onblur="checkpswd();">
			<rich:validator/>
			<f:validateRegex pattern="^[A-Za-z0-9]{10,15}$"/>
		</h:inputSecret>
		<rich:message id="repasswordMsg" for="repswd" style="color:gray;"/>
	</h:panelGrid>

</h:form></span>

validateRegex标签中的patten内容为，校验当前文本框输入的内容格式；validatorMessage表示验证不通过时显示的内容，字体为红色表示；onblur为失去焦点后出发的js方法。

rich:message标签为界面上提示信息的标签，与密码框绑定。

2，js方法

<span style="font-size: 18px;">function check(){
	//获取密码后的提示信息
	var passwd = document.getElementById("userForm:passwordMsg");
	//判断是否为火狐浏览器
	if(window.navigator.userAgent.toLowerCase().indexOf('firefox'!=-1)){
		if(passwd.textContent==""){
			passwd.style.color="groy";
			passwd.textContent="由10-15位字母或数字组成";
		}
	}else{
		if(passwd.innerText==""){
			passwd.style.color="groy";
			passwd.innerText="由10-15位字母或数字组成";
		}
	}
}
</span>

<span style="font-size:18px;">function checkpswd(){
	//获取密码，确认密码及确认密码后提示信息
	var pswd = document.getElementById("userForm:pswd");
	var repswd = document.getElementById("userForm:repswd");
	var repasswd = document.getElementById("userForm:repasswordMsg");

	//判断密码是否一致
	if(pswd.value!=repswd.value){
		//设置提示信息为，密码不一致
		repasswd.style.color="red";
		if(window.navigator.userAgent.toLowerCase().indexOf('firefox'!=-1)){
			repasswd.textContent="密码不一致";
		}else{
			repasswd.innerText="密码不一致";
		}
	}else{
		//设置提示信息为，由10-15位字母或数字组成
		repasswd.style.color="gray";
		if(window.navigator.userAgent.toLowerCase().indexOf('firefox'!=-1)){
			repasswd.textContent="由10-15位字母或数字组成";
		}else{
			repasswd.innerText="由10-15位字母或数字组成";
		}
	}
}</span>