JavaScript登錄驗(yàn)證基礎(chǔ)教程
本文實(shí)例為大家分享了js登錄驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下
1.<script></script>的三種用法：
1.放在<body>中
2.放在<head>中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎你，請先登陸！</title>
<script type="text/javascript" src="../static/jsp/lx.js"></script>
<script type="text/javascript">alert('這是javascript代碼')</script>
</head>
<body>
<p id="demo">www</p>
<script>
document.getElementById('demo').innerHTML = Date()
</script>
<div id="container" style="width: 400px" align="center">
<div id="header" style="background-color: aquamarine">
<h2 align="center">登陸</h2>
</div>
<div id="content">
<form>
<p align="center">賬號:
<input id="uname" type="tex" name="user" placeholder="請輸入用戶名">
</p>
<p align="center">密碼:
<input id="upass" type="password" name="psw">
</p>
<div id="error_box"><br></div>
<br>
<button onclick="fnLogin()">登陸</button>
   
<input type="button" name="regist" value="注冊">
</form>
</div>
<div style="background-color: aquamarine">
<i>版權(quán)信息@</i>
</div>
</div>
</body>
</html>
3.放在外部JS文件中
document.getElementById('demo').innerHTML = Date()
運(yùn)行截圖：
三種輸出數(shù)據(jù)的方式：
1.使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。
2.使用 window.alert() 彈出警告框。
3.使用 innerHTML 寫入到 HTML 元素。
1）.使用 "id" 屬性來標(biāo)識 HTML 元素。
2）.使用 document.getElementById(id) 方法訪問 HTML 元素。
3）.用innerHTML 來獲取或插入元素內(nèi)容。
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎你，請先登陸！</title>
<script type="text/javascript" src="../static/jsp/lx.js"></script>
<script type="text/javascript">alert('這是javascript代碼')</script>
</head>
<body>
<p id="demo">www</p>
<script>
document.getElementById('demo').innerHTML = Date()
</script>
<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>
運(yùn)行截圖：
3.登錄頁面準(zhǔn)備：
1.增加錯誤提示框。
2.寫好HTML+CSS文件。
3.設(shè)置每個輸入元素的id
4.定義JavaScript 函數(shù)。
1.驗(yàn)證用戶名6-20位
2.驗(yàn)證密碼6-20位
5.onclick調(diào)用這個函數(shù)。
html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎你，請先登陸！</title>
<script type="text/javascript" src="../static/jsp/lx.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/lx.css" rel="external nofollow" >
</head>
<body>
<div class="div" id="container">
<div id="header" >
<h2 class="h">登陸</h2>
</div>
<div id="content">
<p class="p">賬號:
<input id="uname" type="text" placeholder="請輸入用戶名">
</p>
<p class="p">密碼:
<input id="upass" type="password" >
</p>
<div id="error_box"><br>
</div>
<button onclick="fnLogin()">登陸</button>
   
<input type="button" name="regist" value="注冊">
</div>
<div>
<i>版權(quán)信息@</i>
</div>
</div>
</body>
</html>
js文件代碼如下：
function fnLogin() {
var oUname = document.getElementById("uname")
var oUpass = document.getElementById("upass")
var oError = document.getElementById("error_box")
if (oUname.value.length > 20 || oUname.value.length < 6) {
oError.innerHTML = "請輸入6-20位字符"
}
if (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "請輸入6-20位字符"
}
}
CSS代碼如下：
.div {
border: 5px solid #cccccc;
width: 400px;
text-align: center;
}
.p{
font-family:華文楷體 ;
}
.h{
font-family: 華文楷體;
}
運(yùn)行截圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解JavaScript如何優(yōu)雅地實(shí)現(xiàn)創(chuàng)建多維數(shù)組
多維數(shù)組的意思是指三維或者三維以上的數(shù)組。這篇文章將通過示例為大家詳細(xì)講解一下JavaScript如何實(shí)現(xiàn)優(yōu)雅地創(chuàng)建多維數(shù)組，需要的可以參考一下2022-07-07
JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名
這篇文章主要介紹了基于JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名的相關(guān)資料，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
這篇文章主要介紹了詳解性能更優(yōu)越的小程序圖片懶加載方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了JavaScript對象原型鏈原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
setTimeout 函數(shù)在前端延遲搜索實(shí)現(xiàn)中的作用詳解
這篇文章主要為大家介紹了setTimeout 函數(shù)在前端延遲搜索實(shí)現(xiàn)中的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
JavaScript實(shí)現(xiàn)的DOM樹遍歷方法詳解【二叉DOM樹、多叉DOM樹】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的DOM樹遍歷方法,結(jié)合實(shí)例形式詳細(xì)分析了二叉DOM樹、多叉DOM樹的前序、中序與后序遍歷,以及多叉樹深度優(yōu)先、廣度優(yōu)先等相關(guān)遍歷操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型
這篇文章主要給大家分享一段javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型的封裝好的代碼，使用非常方便，也很實(shí)用，推薦給大家。2015-01-01
echarts中幾種漸變方式的具體實(shí)現(xiàn)方式
在使用echarts繪制圖表時,有的時候需要使用漸變色,下面這篇文章主要給大家介紹了關(guān)于echarts中幾種漸變方式的具體實(shí)現(xiàn)方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實(shí)現(xiàn)
本文主要介紹了JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了微信小程序自定義頂部組件customHeader的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06