为了账号安全,请及时绑定邮箱和手机立即绑定

贴一下html和css源码

这是html代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>淘宝用户注册</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" media="screen" href="../表单验证/css/style.css" /><script src="../表单验证/js/script.js"></script></head><body><form action=""><div><label for=""><span class="title">会员名:</span><input type="text" class="text"></label><p class="msg"><i class="ati"></i>5-25个字符,1个汉字为两个字符,推荐使用中文会员名</p></div><div><label for=""><span></span><b id="count">0个字符</b></label></div><div><label for=""><span class="title">登录密码:</span><input type="password" class="text"></label><p class="msg"><i class="err"></i></p></div><div id="tips"><label for=""><span></span><em class="active">弱</em><em>中</em><em>强</em></label></div><div class="margin"><label for=""><span class="title">确认密码:</span><input type="password" class="text" disabled=""></label><p class="msg"><i class="ati"></i>请再输入一次</p></div><div class="margin"><label for=""><span class="title">验证码:</span><input type="text" class="text checkimg"></label><img src="../表单验证/images/1.png"><a href="javascript:;"class="changeImg" title="重新获取验证码"></a></div><div class="margin"><input type="submit" id="submitBtn" class="submitBtn btn" value="同意协议并注册"></div></form></body></html>


这是css代码

form{width: 600px;margin: 100px auto;}input{width: 160px;height: 28px;line-height: 28px;}.title{display: inline-block;width: 80px;text-align: right;}p{font-size: 12px;color: gray;width: 300px;float: right;line-height: 28px;vertical-align: top;margin: 2px 30px 0 0;}#count{padding-left: 90px;font-size: 12px;color: gray;line-height: 28px;}em{display: inline-block;width: 54px;height: 20px;background-color: rgb(255, 204, 157);margin-right: 2px;font-size: 12px;font-style: normal;text-align: center;height: 14px;line-height: 14px;color: white;}.active{background-color: rgb(255, 95, 2);}#tips{padding-left: 82px;}img{height: 30px;vertical-align: middle;}.checkimg{width: 100px;}#submitBtn{border: 1px solid rgb(255, 95, 2);width: 166px;height: 30px;background-color: rgb(255, 95, 2);color: white;margin-left: 80px;}.margin{margin-top: 20px;}


正在回答

1 回答

这是JS代码:

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 alnput=document.getElementsByTagName('input');

var oName = alnput[0];

var pwd = alnput[1];

var pwd2 = alnput[2];

var aP = document.getElementsByTagName('p');

var name_msg = aP[0];

var pwd_msg = aP[1];

var pwd2_msg = aP[2]; 

var count = document.getElementById('count');

var aEm = document.getElementsByTagName('li');

var name_length = 0;


   

   //用户名

   

   oName.onfocus = function(){

   name_msg.style.display="block";

   name_msg.innerHTML = '请输入5-25个字符,一个汉字或者两个字符,推荐使用中文会员名。'      

   }

   

   

   

   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(){

   

   //含有非法字符

    var re = /[^\w\u4e00-\u9fa5]/g;  

if(re.test(this.value)){

name_msg.innerHTML = ' <i class ="no"></i> 含有非法字符' ;

}

      

   //不能为空    

   else if(this.value ==""){    

name_msg.innerHTML = ' <i class ="no"></i> 用户名不得为空!' ;       

   }

       

   //长度不能超出25个字符

   else if(name_length >25){    

   name_msg.innerHTML = ' <i class ="no"></i> 用户名长度不得超出25个字符' ;    

   }

   

       //长度不少于6个字符    

     else if(name_length <6){    

   name_msg.innerHTML = ' <i class ="no"></i> 用户名长度不得少于6个字符' ;    

   } 

       

   //OK

    else{

name_msg.innerHTML = ' <i class ="ok"></i> 可以注册!' ; 

}

         

   }

//密码

pwd.onfocus = function(){

pwd_msg.style.display = "block";

pwd_msg.innerHTML = '6-16个字符,请使用字母加数字加符号组成';

}

pwd.onkeyup = function(){

//大于5个字符强

if(this.value.length>5){

aEm[1].className="k";

pwd2.removeAttribute("disabled");

pwd2_msg.style.display = "block";

}

else{

aEm[1].className="kiss";

pwd2.setAttribute("disabled");

pwd2_msg.style.display = "none";

}

//大于10个字符非常强

if(this.value.length>10){

aEm[2].className="k";


}

else{

aEm[2].className="kiss";

}

}

pwd.onblur = function(){

var m = findStr(pwd.value,pwd.value[0]);

var re_n = /[^\d]/g;

var re_t = /[^a-zA-Z]/g;

//不能为空

if(this.value ==""){

pwd_msg.innerHTML = '<i class="no"> </i> 密码不得为空!';

}

//不能用相同字符

else if( m== this.value.length){

pwd_msg.innerHTML = '<i class="no"> </i> 不能使用相同字符!';

}

//长度应该为6-16个字符

else if( this.value.length<6 || this.value.length>16){

pwd_msg.innerHTML = '<i class="no"> </i> 输入的密码应在6-16个字符之间!';

}

//不能全为数字

else if( !re_n.test(this.value)){

pwd_msg.innerHTML = '<i class="no"> </i> 不能全是数字!';

}

//不能全为字母

else if( !re_t.test(this.value)){

pwd_msg.innerHTML = '<i class="no"> </i> 不能全是字母!';

}

//OK

else{

pwd_msg.innerHTML = '<i class="ok"> </i> 可以使用!';

}

}


//确认密码

pwd2.onblur = function(){

if(this.value!=pwd.value){

pwd2_msg.innerHTML = '<i class="no"> </i> 两次密码输入的不一样!';

}

else{

pwd2_msg.innerHTML = '<i class="ok"> </i> 输入正确!';

}

}


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
表单验证
  • 参与学习       53334    人
  • 解答问题       253    个

表单验证是JavaScript中的高级选项之一,输入框的验证

进入课程

贴一下html和css源码

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信