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位字母或數字組成" οnblur="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位字母或數字組成" οnblur="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>