标签:
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>
标签:
原文地址:http://blog.csdn.net/lishuangzhe7047/article/details/45151823