貼一下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="同意協(xié)議并注冊"></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;}
2018-11-30
這是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個字符，請使用字母加數(shù)字加符號組成';
}
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> 不能使用相同字符！';
}
//長度應(yīng)該為6-16個字符
else if( this.value.length<6 || this.value.length>16){
pwd_msg.innerHTML = '<i class="no"> </i> 輸入的密碼應(yīng)在6-16個字符之間！';
}
//不能全為數(shù)字
else if( !re_n.test(this.value)){
pwd_msg.innerHTML = '<i class="no"> </i> 不能全是數(shù)字！';
}
//不能全為字母
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> 輸入正確！';
}
}