十一.表单注册格式验证案例
2017-07-03 本文已影响0人
2点半
function getLength(str){//验证字符个数
return str.replace(/[^\x00-xff]/g,"xx").length;
}
function findStr(str,n){
var tmp=0;
for(var i=0;i<str.length;i++){
if(str.charAt(i)==n)
tmp++;
}
return tmp;
}
window.onload=function(){
var aInput=document.getElementsByTagName("input");
var oName=aInput[0];
var pwd=aInput[1];
var rePwd=aInput[2];
var vCode=aInput[3];
var aP=document.getElementsByTagName("p");
var name_msg=aP[0];
var pwd_msg=aP[1];
var rePwd_msg=aP[2];
var vCode_msg=aP[3]
var count=document.getElementById("count");
var name_length=0;
userName();
userPwd();
reUserPwd();
userCode();
function userName(){
var reg=/[^\w\u4e00-\u9fa5]/g;
oName.onfocus=function(){//获取焦点时
name_msg.style.display="block"
name_msg.innerHTML='<i class="ati"></i> 5-25个字符,一个汉字为两个字符,推荐使用中文会员名. ';
setFocus(this);
}
oName.onkeyup=function(){//离开键盘时判断字符个数的变化
count.style.visibility="visible";
name_length=getLength(this.value);
count.innerHTML=name_length+"个字符";
if(name_length==0){ count.style.visibility="hidden" ;}
}
oName.onblur=function(){ setBlur(this)/*失去焦点时*/
var reg=/[^\w\u4e00-\u9fa5]/g;
if(reg.test(this.value)){//含有非法字符
name_msg.innerHTML='<i class="err"></i>含有非法字符';
}else if(this.value==""){//不能为空
setBlur(this)
name_msg.innerHTML='<i class="err"></i>不能为空';
}else if(name_length>25){ //长度超过25个字符
name_msg.innerHTML='<i class="err"></i>长度超过25个字符';
}else if(name_length<6){//长度少于6个字符
name_msg.innerHTML='<i class="err"></i>长度少于6个字符';
}else{ //OK
name_msg.innerHTML='<i class="ok"></i>OK';
}
}
}
function userPwd(){
pwd.onfocus=function(){
pwd_msg.style.display="block";
pwd_msg.innerHTML='<i class="ati"></i>6-16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号。';
setFocus(this)
}
pwd.onkeyup=function(){
if(this.value.length>5){
rePwd.removeAttribute("disabled");
rePwd_msg.style.display="block";
rePwd_msg.innerHTML= '<i class="ati"></i>请再输入一次';
}else{
rePwd.setAttribute("disabled","disabled");
rePwd_msg.style.display="none";
}
}
pwd.onblur=function(){
setBlur(this);
var re_n=/[^\d]/g;
var re_t=/[^a-zA-Z]/g;
var m=findStr(pwd.value,pwd.value[0])
if(this.value==""){ //不能为空
pwd_msg.innerHTML='<i class="err"></i>不能为空';
}else if(this.value.length>5&&m==this.value.length){//不能用相同字符
pwd_msg.innerHTML='<i class="err"></i>不能使用相同字符';
}else if(this.value.length<6||this.value.length>16){ //长度应该为6-16个字符
pwd_msg.innerHTML='<i class="err"></i>长度应该为6-16个字符';
}else if(!isNaN(this.value)){ //不能全为数字
pwd_msg.innerHTML='<i class="err"></i>不能全为数字';
}else if(!re_t.test(this.value)){//不能全为字母
pwd_msg.innerHTML='<i class="err"></i>不能全为字母';
}else{
pwd_msg.innerHTML='<i class="ok"></i>OK';
}
}
}
function reUserPwd(){
rePwd.onfocus=function(){
setFocus(this)
}
rePwd.onblur=function(){
setBlur(this)
if(this.value!=pwd.value){
rePwd_msg.innerHTML='<i class="err"></i>两次输入的密码不一样';
}else{
rePwd_msg.innerHTML='<i class="ok"></i>OK';
}
}
}
function userCode(){
vCode.onfocus=function(){
setFocus(this)
}
vCode.onblur=function(){
setBlur(this);
}
}
function setFocus(o){
if(o.value==o.defaultValue){
o.value="";
o.style.color="#4a4a4a"
}
}
function setBlur(o){
if(o.value==""){
o.value=o.defaultValue;
o.style.color="#ccc";
}
}
}
<fieldset>
<legend>表单验证</legend>
<form action="">
<div class="main">
<div class="box">
<div class="userDiv">
<label><input type="text" name="" id="" value="请输入您的手机号" class="text userName"/></label><p></p>
</div>
<b id="count"></b>
<div class="passDiv">
<label> <input type="text" id="" name="" class="" value="请输入密码"/></label><p></p>
</div>
<div class="repassDiv">
<label> <input type="text" id="" name="" class="" value="请再次输入密码" disabled=""/></label><p></p>
</div>
<div class="verityDiv">
<input type="text" id="" name="" class="verityCode" value="请输入验证码"/>
<span class="img" title="看不清,换一张"></span>
<p></p>
</div>
<input type="button" class="btnSure" value="提交注册申请"/>
</div>
</div>
</form>
</fieldset>
.main{width:530px;margin:20px auto;}
input[type="text"],input[type="password"]{width:200px;height:30px;padding-left:5px;color:#ccc;margin-top:25px;border:1px solid #c0c6c9;background:#fff;}
span.img{float:right;margin-right:320px;margin-top:25px;}
span.img img{border:1px solid #c0c6c9;height:32px;width:90px;cursor: pointer}
.box b{color:#ccc;display:block;font-size:12px;font-weight:normal;position:absolute;visibility:hidden;}
.box div{position:relative;}
input.verityCode{width:100px;}
.box p{position:absolute;left:220px;top:20px;font-size:12px;color:#666;vertical-align: middle;padding-left:15px;}
.btnSure{width:210px;margin:20px 0 10px 0;height:35px;border:0;background:#e2041b;color:#fff;font-size:14px;cursor: pointer;}
i{display:inline-block;width:12px;height:12px;vertical-align:middle;float:left;margin:2px 2px 0 -15px;}
i.ati{background:url(images/ati.png) no-repeat;background-size:100%;}
i.err{background:url(images/err.png) no-repeat;background-size:100%;}
i.ok{background:url(images/ok.png) no-repeat;background-size:100%;}
