這篇文章主要介紹了怎么使用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商,擁有專業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù),十余年企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都上1000家客戶提供網(wǎng)頁設(shè)計(jì)制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),同時(shí)也為不同行業(yè)的客戶提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè),傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)。
1、js屬于一種解釋性腳本語言;2、在絕大多數(shù)瀏覽器的支持下,js可以在多種平臺(tái)下運(yùn)行,擁有著跨平臺(tái)特性;3、js屬于一種弱類型腳本語言,對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,能夠進(jìn)行類型轉(zhuǎn)換,簡單又容易上手;4、js語言安全性高,只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互,從而有效地防止數(shù)據(jù)的丟失;5、基于對(duì)象的腳本語言,js不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。
實(shí)現(xiàn)過程示意圖

代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
<style>
.ok {
color: green;
border: 1px solid green;
}
.error {
color: red;
border: 1px solid red;
}
</style>
<script>
//校驗(yàn)賬號(hào)的格式
function check_code() {
console.log(1);
//獲取賬號(hào)
var code =
document.getElementById("code").value;
//校驗(yàn)其格式(\w字母或數(shù)字或下劃線)
var span =
document.getElementById("code_msg");
var reg = /^\w{6,10}$/;
if(reg.test(code)) {
//通過,增加ok樣式
span.className = "ok";
} else {
//不通過,增加error樣式
span.className = "error";
}
}
function check_pwd(){
console.log(2);
var code2 =document.getElementById("pwd").value;
var span2 =
document.getElementById("pwd_msg");
var reg2 = /^\w{6,10}$/;
if(reg2.test(code2)) {
span2.className = "ok";
} else {
span2.className = "error";
}
}
</script>
</head>
<body>
<form action="http://www.tmooc.cn">
<p>
賬號(hào):
<input type="text" id="code" onblur="check_code()"/>
<span id="code_msg">6-10位字母、數(shù)字、下劃線</span>
</p>
<p>
密碼:
<input type="text" id="pwd" onblur="check_pwd()" />
<span id="pwd_msg">8-20位字母、數(shù)字、下劃線</span>
</p>
<p><input type="submit" value="登錄"/></p>
</form>
</body>
</html>下面在看一段簡單的代碼關(guān)于javascript實(shí)現(xiàn)簡單的用戶登錄驗(yàn)證
代碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function check() {
if(document.getElementById("username").value=="") {
alert("沒有輸入用戶名!");
return false;
} else if(document.getElementById("password").value=="") {
alert("沒有輸入密碼!");
return false;
} else {
alert("提交成功!")
return true;
}
}
</script>
<form name="form1">
<input type="text" id="username">
<input type="password" id="password" >
<input type="submit" onclick="check()">
</form>
</body>
</html>感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“怎么使用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
新聞名稱:怎么使用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能
文章URL:http://www.chinadenli.net/article40/iphsho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)