源代碼我自己敲的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/my.js" ></script>
</head>
?
<body>
<form>
? ? <!--會員名-->
? ? <div>
? ? ? ? <label>
? ? ? ? ? ? <span>會員名：</span>
? ? ? ? ? ? <input type="text" class="text" />
? ? ? ? </label>
? ? ? ? <p class="msg">
? ? ? ? ? ? <img src="img/ati.png" width="20" height="20">
? ? ? ? ? ? 5-25個字符，一個漢字為兩個字符，推薦使用中文會員名
? ? ? ? </p>
? ? </div>
? ? <div>
? ? ? ? <label>
? ? ? ? ? ? <span></span>
? ? ? ? ? ? <b id="count">0個字符</b>
? ? ? ? </label>
? ? </div>
?
? ? <!--密碼-->
? ? <div>
? ? ? ? <label>
? ? ? ? ? ? <span>登陸密碼：</span>
? ? ? ? ? ? <input type="password" class="text" />
? ? ? ? </label>
? ? ? ? <p class="msg">
? ? ? ? ? ? <img src="img/ati.png" width="20" height="20">
? ? ? ? ? ? 5-25個字符，請使用字母加數(shù)字或符號組合密碼，不能單獨(dú)使用字母、數(shù)字或符號。
? ? ? ? </p>
? ? </div>
?
? ? <div style="margin:3px 0 10px 0">
? ? ? ? <label>
? ? ? ? ? ? <span></span>
? ? ? ? ? ? <em class="active">弱</em>
? ? ? ? ? ? <em>中</em>
? ? ? ? ? ? <em>強(qiáng)</em>
? ? ? ? </label>
? ? </div>
?
? ? <!--確認(rèn)密碼-->
? ? <div style="padding-bottom:20px">
? ? ? ? <label>
? ? ? ? ? ? <span>確認(rèn)密碼：</span>
? ? ? ? ? ? <input type="password" class="text" disabled="" />
? ? ? ? </label>
? ? ? ? <p class="msg">
? ? ? ? ? ? <img src="img/ati.png" width="20" height="20">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 請?jiān)佥斠淮?/p>
? ? ? ? </p>
? ? </div>
?
? ? <!--驗(yàn)證碼-->
? ? <div>
? ? ? ? <label>
? ? ? ? ? ? <span>驗(yàn)證碼：</span>
? ? ? ? ? ? <input type="text" class="text" style="width:50px" />
? ? ? ? ? ? <img class="ver_img" src="img/verification_code.png">
? ? ? ? ? ? <a class="changeimg" href="#" title="重新獲取驗(yàn)證碼"></a>
? ? ? ? </label>
? ? </div>
?
? ? <!--提交按鈕-->
? ? <div>
? ? ? ? <input class="submitBtn btn" type="submit" value="同意協(xié)議并注冊">
? ? </div>
?
</form>
</body>
</html>
/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,?
figure, figcaption, footer, header, hgroup,?
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
? ? margin: 0;
? ? padding: 0;
? ? border: 0;
? ? font-size: 100%;
? ? font: inherit;
? ? vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,?
footer, header, hgroup, menu, nav, section {
? ? display: block;
}
body {
? ? line-height: 1;
}
ol, ul {
? ? list-style: none;
}
blockquote, q {
? ? quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
? ? content: '';
? ? content: none;
}
table {
? ? border-collapse: collapse;
? ? border-spacing: 0;
}
?
/*main*/
body{
? ? font-family: "微軟雅黑"；
}
?
form{
?
? ? float:left;
? ? width: 1100px;
? ? height: 500px;
? ? margin:50px 200px;
}
form div{
? ? overflow: hidden;
? ? clear: both;
}
form div label{
? ? float: left;
? ? clear:both;
}
form div label .text{
? ? width:161px;
? ? height:26px;
? ? padding:0 2px;
? ? border:1px solid #ccc;
? ? margin-top: 5px;
}
form div label b{
? ? font-weight: normal;
? ? font-size: 12px;
? ? color:#ccc;
? ? visibility: hidden;
}
form div em{
? ? display: inline-block;
? ? font-size: 12px;
? ? text-align: center;
? ? color: #fff;
? ? vertical-align: middle;
? ? font-style: normal;
? ? width: 53px;
? ? height:15px;
? ? line-height: 15px;
? ? background-color: #FFD099
}
form div .active{
? ? background-color: #FF6600;
}
div span{
? ? display:inline-block;
? ? width: 120px;
? ? text-align: right;
}
.submitBtn{
? ? width:135px;
? ? height:33px;
? ? background-color:#F95712;
? ? color: #fff;
? ? margin:20px 0 0 80px;
}
.changeimg{
? ? width: 22px;
? ? height:22px;
? ? display: inline-block;
? ? vertical-align: middle;
? ? background: url("img/refresh.png") no-repeat;
}
.msg{
? ? line-height: 12px;
? ? color:#999;
? ? float: left;
? ? margin-left: 5px;
? ? margin-top:10px;
? ? display: none;
}
? ? ?
.msg i{
? ? display:inline-block;
? ? vertical-align: middle;
? ? width: 25px;
? ? height: 20px;
? ? ?
}
.msg .err{
? ? background:url(../img/err.png) no-repeat 2px -1px;
}
.msg .ok{
? ? background:url(img/ok.png) no-repeat 2px -1px;
}
.ver_img{
? ? height:35px;
? ? width: 68px;
? ? bottom: 0;
? ? vertical-align: bottom;
}
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 paw=aInput[1];
var paw2=aInput[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('em');
var name_length=0;
//1.數(shù)字、字母（不分大小寫）、漢字、下劃線
//2.5-25字符，推薦使用中文會員名
//用戶名
oName.onfocus=function(){
name_msg.style.display="block";
}
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="err"><img src="img/err.png" width="20" height="20"></i>含有非法字符！';
}
//不能為空
else if(this.value==""){
name_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能為空！';
}
//長度超過25個字符
else if(name_length>=25){
name_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>長度超過25個字符！';
}
//長度少于6個字符
else if(name_length<=6){
name_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>長度少于6個字符！';
}
//OK
else{
name_msg.innerHTML='<i class="err"><img src="img/ok.png" width="20" height="20"></i>OK！';
}
}
//密碼
paw.onfocus=function(){
pwd_msg.style.display="block";
}
paw.onkeyup=function(){
//大于5個字符為“中”
if(this.value.length>5){
aEm[1].className="active";
paw2.removeAttribute("disabled");
pwd2_msg.style.display="block";
}
else{
aEm[1].className="";
paw2.setAttribute("disabled","");
pwd2_msg.style.display="none";
}
//大于10個字符
if(this.value.length>10){
aEm[2].className="active";
}
else{
aEm[2].className="";
}
}
paw.onblur=function(){
var m=findStr(paw.value,paw.value[0]);
var re_n=/[^\d]/g;
var re_t=/[^a-zA-Z]/g;
//不能為空
? ? ? ? if(this.value==""){
? ? ? ? pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能為空！';
? ? ? ? }
//不能用相同字符
else if(m==this.value.length){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能用相同字符！';
}
//長度應(yīng)為6-16個字符
else if(this.value.length<6||this.value.length>16){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>長度應(yīng)為6-16個字符！';
}
//不能全為數(shù)字
else if(!re_n.test(this.value)){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能全為數(shù)字！';
}
//不能全為字母
else if(!re_t.test(this.value)){
pwd_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>不能全為字母！';
}
//OK
else{
pwd_msg.innerHTML='<i class="err"><img src="img/ok.png" width="20" height="20"></i>OK！';
}
}
//確認(rèn)密碼
paw2.onblur=function(){
if(this.value!=paw.value){
pwd2_msg.innerHTML='<i class="err"><img src="img/err.png" width="20" height="20"></i>兩次輸入密碼不一致！';
}
else{
pwd2_msg.innerHTML='<i class="err"><img src="img/ok.png" width="20" height="20"></i>OK！';
}
}
}
2017-04-16
可以給圖片嗎？那個err.png和ok.png。
2015-06-13
這是表單驗(yàn)證嗎？
2015-06-13
里面有html和css和js代碼，都是可以用的