課程
/前端開發(fā)
/JavaScript
/表單驗(yàn)證
老師，請(qǐng)問有沒有這個(gè)課程的源代碼呢？想學(xué)習(xí)一下
2018-04-25
源自：表單驗(yàn)證 5-1
正在回答
<!DOCTYPE html><html>? <head>?????????<title>注冊(cè)</title>?<style>*{margin:0;??padding:0???}body{font-size:20px;}?#allcontent{????????????width:1024px;????????????padding:15px;????????????margin:100px auto 0;????????????border: 1px dashed orange}?p{display:inline;??margin-left:10px}?#count{visibility:hidden;???????margin-left:83px}?#em{background:orange;????width:153px;????margin:3px 0 7px 60px}?em{opacity:0.2;???display:inline-block;???width:51px;???text-align:center}?em:first-child{background:orange;???????????????opacity:1}?.active{background:orange;????????opacity:1}</style>??? </head>?????<body>???<form id="allcontent">????<div>???<label><b>會(huì)員名：</b><input type="text"></label><p>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名。</p>???</div>???<div id="count">0個(gè)字符</div>???<div>???<label><b>密碼：</b><input type="text"></label><p>6-16個(gè)字符，請(qǐng)使用字母加數(shù)字或符號(hào)的組合密碼，不能單獨(dú)使用字母、數(shù)字或符號(hào)。</p>???</div>???<div id="em">???<em>弱</em><em>中</em><em>強(qiáng)</em>???</div>???<div>???<label><b>確認(rèn)密碼：</b><input type="text" disabled></label><p></p>???</div>????</form>?<script>function getLength(str){??// \x00-xff代表單字節(jié)字符。??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 pwd2 = 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;?//會(huì)員名???oName.onfocus = function(){????name_msg.style.display = "inline";????name_msg.innerHTML = "<i class=‘a(chǎn)ti’></i>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名。";??}???oName.onkeyup = function(){????count.style.visibility = "visible";????name_length = getLength(this.value);????count.innerHTML = name_length + "個(gè)字符";????if(name_length==0){??????count.style.visibility = "hidden";????}??}???oName.onblur = function(){????//含有非法字符??????????? ????var reg = /[^\w\u4e00-\u9fa5]/g;??? // \w代表“數(shù)字、字母（不分大小寫）、下劃線”，\u4e00-\u9fa5代表漢字。 ?????if(reg.test(this.value)){??????name_msg.innerHTML = '<i class="err"></i>含有非法字符！';????}?????//不能為空????else if (this.value==""){??????name_msg.innerHTML = "<i class='err'></i>不能為空！";????}?????//長(zhǎng)度超過25個(gè)字符????else if (name_length > 25){??????name_msg.innerHTML = "<i class='err'></i>長(zhǎng)度超過25個(gè)字符！";????}?????//長(zhǎng)度少于6個(gè)字符????else if (name_length < 6){??????name_msg.innerHTML = "<i class='err'></i>長(zhǎng)度少于6個(gè)字符！";????}?????//OK????else {??????name_msg.innerHTML = "<i class='err'></i>OK！";??????count.style.visibility = "hidden";????}??}?//密碼???pwd.onfocus = function(){????pwd_msg.style.display = "inline";????pwd_msg.innerHTML = '<i class="ati"></i>6-16個(gè)字符，請(qǐng)使用字母加數(shù)字或符號(hào)的組合密碼，不能單獨(dú)使用字母、數(shù)字或符號(hào)。'??}???pwd.onkeyup = function(){????//大于5字符為“中”????if(this.value.length>5){??????aEm[1].className = "active";??????pwd2.removeAttribute("disabled");??????pwd2_msg.style.display = "inline";????}else{??????aEm[1].className = "";??????pwd2.setAttribute("disabled");??????pwd2_msg.style.display = "none";????? ????}?????//大于10字符為“強(qiáng)”????if(this.value.length>10){??????aEm[2].className = "active";????}else{??????aEm[2].className = "";????}??}???pwd.onblur = function(){????var m = findStr(pwd.value, pwd.value[0]);?????var reg_n = /[^\d]/g;????var reg_c = /[^a-zA-Z]/g;?????//不能為空????if(this.value==""){??????pwd_msg.innerHTML = '<i class="err"></i>不能為空！';????}????//不能用相同字符????else if(m == this.value.length){??????pwd_msg.innerHTML = '<i class="err"></i>不能用相同字符！';????}????//長(zhǎng)度應(yīng)為6-16個(gè)字符????else if(this.value.length < 6 || this.value.length > 16){??????pwd_msg.innerHTML = '<i class="err"></i>長(zhǎng)度應(yīng)為6-16個(gè)字符！';????}????//不能全為數(shù)字????else if(!reg_n.test(this.value)){??????pwd_msg.innerHTML = '<i class="err"></i>不能全為數(shù)字！';????}????//不能全為字母????else if(!reg_c.test(this.value)){??????pwd_msg.innerHTML = '<i class="err"></i>不能全為字母！';????}????//OK????else{??????pwd_msg.innerHTML = '<i class="ok"></i>OK！';????}??}?//確認(rèn)密碼???pwd2.onblur = function(){????if(this.value != pwd.value){??????pwd2_msg.innerHTML = '<i class="err"></i>兩次輸入的密碼不一致！';????}else{??????pwd2_msg.innerHTML = '<i class="ok"></i>OK！';????}??}}</script></body></html>
<!DOCTYPE html>
<
html
>?
head
>
????????
title
>注冊(cè)</
style
*{margin:0;
??
padding:0
}
body{font-size:20px;}
#allcontent{
????????????
width:1024px;
padding:15px;
margin:100px auto 0;
border: 1px dashed orange
p{display:inline;
margin-left:10px
#count{visibility:hidden;
???????
margin-left:83px
#em{background:orange;
????
width:153px;
margin:3px 0 7px 60px
em{opacity:0.2;
???
display:inline-block;
width:51px;
text-align:center
em:first-child{background:orange;
???????????????
opacity:1
.active{background:orange;
</
>???
body
form
id
=
"allcontent"
div
label
><
b
>會(huì)員名：</
input
type
"text"
></
p
>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名。</
"count"
>0個(gè)字符</
>密碼：</
>6-16個(gè)字符，請(qǐng)使用字母加數(shù)字或符號(hào)的組合密碼，不能單獨(dú)使用字母、數(shù)字或符號(hào)。</
"em"
em
>弱</
>中</
>強(qiáng)</
>確認(rèn)密碼：</
disabled></
script
function getLength(str){
// \x00-xff代表單字節(jié)字符。
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');
oName
[0];
pwd
[1];
pwd2
[2];
aP
.getElementsByTagName('p');
name_msg
pwd_msg
pwd2_msg
count
.getElementById('count');
aEm
.getElementsByTagName('em');
name_length
0
;
//會(huì)員名
oName.onfocus
name_msg.style.display
"inline"
name_msg.innerHTML = "<i class=‘a(chǎn)ti’></
i
>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名。";
oName.onkeyup = function(){
count.style.visibility = "visible";
name_length = getLength(this.value);
count.innerHTML = name_length + "個(gè)字符";
if(name_length==0){
count.style.visibility = "hidden";
oName.onblur = function(){
//含有非法字符???????????
var reg = /[^\w\u4e00-\u9fa5]/g;??? // \w代表“數(shù)字、字母（不分大小寫）、下劃線”，\u4e00-\u9fa5代表漢字。
if(reg.test(this.value)){
name_msg.innerHTML = '<
class
"err"
>含有非法字符！';
//不能為空
else if (this.value==""){
name_msg.innerHTML = "<
'err'
>不能為空！";
//長(zhǎng)度超過25個(gè)字符
else if (name_length > 25){
>長(zhǎng)度超過25個(gè)字符！";
//長(zhǎng)度少于6個(gè)字符
else if (name_length <
6
){
name_msg.innerHTML = "<i
>長(zhǎng)度少于6個(gè)字符！";
//OK
else {
>OK！";
//密碼
pwd.onfocus = function(){
pwd_msg.style.display = "inline";
pwd_msg.innerHTML = '<
"ati"
>6-16個(gè)字符，請(qǐng)使用字母加數(shù)字或符號(hào)的組合密碼，不能單獨(dú)使用字母、數(shù)字或符號(hào)。'
pwd.onkeyup = function(){
//大于5字符為“中”
if(this.value.length>5){
aEm[1].className = "active";
pwd2.removeAttribute("disabled");
pwd2_msg.style.display = "inline";
}else{
aEm[1].className = "";
pwd2.setAttribute("disabled");
pwd2_msg.style.display = "none";?????
//大于10字符為“強(qiáng)”
if(this.value.length>10){
aEm[2].className = "active";
aEm[2].className = "";
pwd.onblur = function(){
var m = findStr(pwd.value, pwd.value[0]);
var reg_n = /[^\d]/g;
var reg_c = /[^a-zA-Z]/g;
if(this.value==""){
>不能為空！';
//不能用相同字符
else if(m == this.value.length){
>不能用相同字符！';
//長(zhǎng)度應(yīng)為6-16個(gè)字符
else if(this.value.length <
|| this.value.length > 16){
>長(zhǎng)度應(yīng)為6-16個(gè)字符！';
//不能全為數(shù)字
else if(!reg_n.test(this.value)){
>不能全為數(shù)字！';
//不能全為字母
else if(!reg_c.test(this.value)){
>不能全為字母！';
else{
"ok"
>OK！';
//確認(rèn)密碼
pwd2.onblur = function(){
if(this.value != pwd.value){
pwd2_msg.innerHTML = '<
>兩次輸入的密碼不一致！';
舉報(bào)
表單驗(yàn)證是JavaScript中的高級(jí)選項(xiàng)之一，輸入框的驗(yàn)證
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-05-08
<!DOCTYPE html><html>?<head>?????????<title>注冊(cè)</title>?<style>*{margin:0;??padding:0???}body{font-size:20px;}?#allcontent{????????????width:1024px;????????????padding:15px;????????????margin:100px auto 0;????????????border: 1px dashed orange}?p{display:inline;??margin-left:10px}?#count{visibility:hidden;???????margin-left:83px}?#em{background:orange;????width:153px;????margin:3px 0 7px 60px}?em{opacity:0.2;???display:inline-block;???width:51px;???text-align:center}?em:first-child{background:orange;???????????????opacity:1}?.active{background:orange;????????opacity:1}</style>???</head>?????<body>???<formid="allcontent">????<div>???<label><b>會(huì)員名：</b><inputtype="text"></label><p>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名。</p>???</div>???<divid="count">0個(gè)字符</div>???<div>???<label><b>密碼：</b><inputtype="text"></label><p>6-16個(gè)字符，請(qǐng)使用字母加數(shù)字或符號(hào)的組合密碼，不能單獨(dú)使用字母、數(shù)字或符號(hào)。</p>???</div>???<divid="em">???<em>弱</em><em>中</em><em>強(qiáng)</em>???</div>???<div>???<label><b>確認(rèn)密碼：</b><inputtype="text"disabled></label><p></p>???</div>????</form>?<script>function getLength(str){??// \x00-xff代表單字節(jié)字符。??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(){??varaInput=document.getElementsByTagName('input');??varoName=aInput[0];??varpwd=aInput[1];??varpwd2=aInput[2];??varaP=document.getElementsByTagName('p');??varname_msg=aP[0];??varpwd_msg=aP[1];??varpwd2_msg=aP[2];??varcount=document.getElementById('count');??varaEm=document.getElementsByTagName('em');??varname_length=0;?//會(huì)員名???oName.onfocus=function(){????name_msg.style.display="inline";????name_msg.innerHTML = "<i class=‘a(chǎn)ti’></i>5-25個(gè)字符，一個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名。";??}???oName.onkeyup = function(){????count.style.visibility = "visible";????name_length = getLength(this.value);????count.innerHTML = name_length + "個(gè)字符";????if(name_length==0){??????count.style.visibility = "hidden";????}??}???oName.onblur = function(){????//含有非法字符???????????????var reg = /[^\w\u4e00-\u9fa5]/g;??? // \w代表“數(shù)字、字母（不分大小寫）、下劃線”，\u4e00-\u9fa5代表漢字。?????if(reg.test(this.value)){??????name_msg.innerHTML = '<iclass="err"></i>含有非法字符！';????}?????//不能為空????else if (this.value==""){??????name_msg.innerHTML = "<iclass='err'></i>不能為空！";????}?????//長(zhǎng)度超過25個(gè)字符????else if (name_length > 25){??????name_msg.innerHTML = "<iclass='err'></i>長(zhǎng)度超過25個(gè)字符！";????}?????//長(zhǎng)度少于6個(gè)字符????else if (name_length <6){??????name_msg.innerHTML = "<iclass='err'></i>長(zhǎng)度少于6個(gè)字符！";????}?????//OK????else {??????name_msg.innerHTML = "<iclass='err'></i>OK！";??????count.style.visibility = "hidden";????}??}?//密碼???pwd.onfocus = function(){????pwd_msg.style.display = "inline";????pwd_msg.innerHTML = '<iclass="ati"></i>6-16個(gè)字符，請(qǐng)使用字母加數(shù)字或符號(hào)的組合密碼，不能單獨(dú)使用字母、數(shù)字或符號(hào)。'??}???pwd.onkeyup = function(){????//大于5字符為“中”????if(this.value.length>5){??????aEm[1].className = "active";??????pwd2.removeAttribute("disabled");??????pwd2_msg.style.display = "inline";????}else{??????aEm[1].className = "";??????pwd2.setAttribute("disabled");??????pwd2_msg.style.display = "none";?????????}?????//大于10字符為“強(qiáng)”????if(this.value.length>10){??????aEm[2].className = "active";????}else{??????aEm[2].className = "";????}??}???pwd.onblur = function(){????var m = findStr(pwd.value, pwd.value[0]);?????var reg_n = /[^\d]/g;????var reg_c = /[^a-zA-Z]/g;?????//不能為空????if(this.value==""){??????pwd_msg.innerHTML = '<iclass="err"></i>不能為空！';????}????//不能用相同字符????else if(m == this.value.length){??????pwd_msg.innerHTML = '<iclass="err"></i>不能用相同字符！';????}????//長(zhǎng)度應(yīng)為6-16個(gè)字符????else if(this.value.length <6|| this.value.length > 16){??????pwd_msg.innerHTML = '<iclass="err"></i>長(zhǎng)度應(yīng)為6-16個(gè)字符！';????}????//不能全為數(shù)字????else if(!reg_n.test(this.value)){??????pwd_msg.innerHTML = '<iclass="err"></i>不能全為數(shù)字！';????}????//不能全為字母????else if(!reg_c.test(this.value)){??????pwd_msg.innerHTML = '<iclass="err"></i>不能全為字母！';????}????//OK????else{??????pwd_msg.innerHTML = '<iclass="ok"></i>OK！';????}??}?//確認(rèn)密碼???pwd2.onblur = function(){????if(this.value != pwd.value){??????pwd2_msg.innerHTML = '<iclass="err"></i>兩次輸入的密碼不一致！';????}else{??????pwd2_msg.innerHTML = '<iclass="ok"></i>OK！';????}??}}</script></body></html>