JavaScript實現(xiàn)表單注冊、表單驗證、運算符功能

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

JavaScript實現(xiàn)表單注冊、表單驗證、運算符功能

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

推薦度：

點擊下載本文 文檔為doc格式

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

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

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

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

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

特點：輕量級、通用、可插入html設(shè)計、易學(xué)

JS-注冊表單檢測雛形

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

JS-校驗表單

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

如需在用戶點擊某個元素時執(zhí)行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：

onclick=JavaScript

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-檢測用戶名</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>
<!--
實現(xiàn)步驟:
 1. 確定事件類型onsubmit(常見事件類型的網(wǎng)址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
 2. 對這個事件綁定一個函數(shù)(執(zhí)行的操作寫在函數(shù)里面);
 3. 函數(shù)的核心功能: 校驗用戶名是否為空?
 1). 獲取輸入用戶名標(biāo)簽提交的內(nèi)容；
 2). if判斷用戶名是否為空?
 3). 如果數(shù)據(jù)合法， 繼續(xù)執(zhí)行， 提交表單；
 4). 如果數(shù)據(jù)不合法， 不讓表單提交? (顯示彈出框報錯) --- alert
-->
<!--onsubmit 事件會在表單中的確認(rèn)按鈕被點擊時發(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="注冊">
 
</form>
 
</body>!
</html>

JS-運算符

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-等號</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>