JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:06:16

JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能

JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能:JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動(dòng)電話。 JavaScript 被設(shè)計(jì)為向 HTML 頁面增加交互性。許多 HTML 開發(fā)者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能:JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動(dòng)電話。 JavaScript 被設(shè)計(jì)為向 HTML 頁面增加交互性。許多 HTML 開發(fā)者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法

JavaScript 是世界上最流行的腳本語言。

JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動(dòng)電話。

JavaScript 被設(shè)計(jì)為向 HTML 頁面增加交互性。

許多 HTML 開發(fā)者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個(gè)人都有能力將小的 JavaScript 片段添加到網(wǎng)頁中。

特點(diǎn)：輕量級(jí)、通用、可插入html設(shè)計(jì)、易學(xué)

JS-注冊(cè)表單檢測(cè)雛形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-注冊(cè)表單</title>
 <script>
 // 在頁面加載時(shí)，執(zhí)行指定函數(shù)
 window.onload = function () {
 // document.getElementById() 獲取用戶輸入的用戶名的標(biāo)簽對(duì)象;
 var uEle = document.getElementById('username');
 // 彈出警示框
 alert(uEle);
 // 獲取對(duì)象里面的值
 var uValue = uEle.value;
 alert(uValue)
 
 }
 </script>
</head>
<body>
<form action="#" method="get">
 <!--get: 填寫的信息會(huì)在url里面顯示， 對(duì)于重要的數(shù)據(jù)來說是不安全的；
 post: 填寫的信息不會(huì)在url里面顯示
 -->
 用戶名：<input type="text" name="username" placeholder="用戶名" id="username">
 <br>
 密碼：<input type="password" name="passwd" placeholder="密碼" id="passwd">
 <br>
 <input type="submit" value="注冊(cè)">
 
</form>
</body>
</html>

JS-校驗(yàn)表單

我們可以在事件發(fā)生時(shí)執(zhí)行 JavaScript，比如當(dāng)用戶在 HTML 元素上點(diǎn)擊時(shí)。

如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，請(qǐng)向一個(gè) HTML 事件屬性添加 JavaScript 代碼：

onclick=JavaScript

需求：校驗(yàn)用戶名是否為空、密碼長度是否大于6

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-檢測(cè)用戶名</title>
 <script>
 function checkForm() {
 var nameValue = document.getElementById('username').value;
 if (nameValue ===''){
 alert('用戶名不能為空！');
 return false
 }
 var passValue = document.getElementById('passwd').value;
 if (passValue.length <= 6){
 alert('密碼長度需大于6');
 return false
 }
 
 }
 
 </script>
</head>
<body>
<!--
實(shí)現(xiàn)步驟:
 1. 確定事件類型onsubmit(常見事件類型的網(wǎng)址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
 2. 對(duì)這個(gè)事件綁定一個(gè)函數(shù)(執(zhí)行的操作寫在函數(shù)里面);
 3. 函數(shù)的核心功能: 校驗(yàn)用戶名是否為空?
 1). 獲取輸入用戶名標(biāo)簽提交的內(nèi)容；
 2). if判斷用戶名是否為空?
 3). 如果數(shù)據(jù)合法， 繼續(xù)執(zhí)行， 提交表單；
 4). 如果數(shù)據(jù)不合法， 不讓表單提交? (顯示彈出框報(bào)錯(cuò)) --- alert
-->
<!--onsubmit 事件會(huì)在表單中的確認(rèn)按鈕被點(diǎn)擊時(shí)發(fā)生-->
<form action="#" method="get" onsubmit="return checkForm()">
 
 用戶名: <input type="text" name="username" placeholder="用戶名" id="username"><br/>
 密碼: <input type="password" name="passwd" placeholder="密碼" id="passwd"><br/>
 <input type="submit" value="注冊(cè)">
 
</form>
 
</body>!
</html>

JS-運(yùn)算符

與python不同，‘=='判斷時(shí)，會(huì)將字符串轉(zhuǎn)換為整形進(jìn)行比較，‘==='判斷是類型和值一起比較

5 =='5' --> true
5==='5' --> false

基于某些條件對(duì)變量進(jìn)行賦值的條件運(yùn)算符。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-等號(hào)</title>
 <script>
 var x = 5;
 var y = '5';
 alert(x===y);
 var num =(5==='5')?'ok':'not ok '
 alert(num)
 </script>
</head>
<body>
 
</body>
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：驗(yàn)證校驗(yàn) javascript

熱門焦點(diǎn)

JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能

JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能

JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能

最新推薦

猜你喜歡

熱門推薦