JavaScript實現表單注冊、表單驗證、運算符功能

來源：懂視網責編：小采時間：2020-11-27 22:06:16

JavaScript實現表單注冊、表單驗證、運算符功能

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

推薦度：

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

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

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

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

JavaScript 被設計為向 HTML 頁面增加交互性。

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

特點：輕量級、通用、可插入html設計、易學

JS-注冊表單檢測雛形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-注冊表單</title>
 <script>
 // 在頁面加載時，執行指定函數
 window.onload = function () {
 // document.getElementById() 獲取用戶輸入的用戶名的標簽對象;
 var uEle = document.getElementById('username');
 // 彈出警示框
 alert(uEle);
 // 獲取對象里面的值
 var uValue = uEle.value;
 alert(uValue)
 
 }
 </script>
</head>
<body>
<form action="#" method="get">
 <!--get: 填寫的信息會在url里面顯示， 對于重要的數據來說是不安全的；
 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-校驗表單

我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。

如需在用戶點擊某個元素時執行代碼，請向一個 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>
<!--
實現步驟:
 1. 確定事件類型onsubmit(常見事件類型的網址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
 2. 對這個事件綁定一個函數(執行的操作寫在函數里面);
 3. 函數的核心功能: 校驗用戶名是否為空?
 1). 獲取輸入用戶名標簽提交的內容；
 2). if判斷用戶名是否為空?
 3). 如果數據合法， 繼續執行， 提交表單；
 4). 如果數據不合法， 不讓表單提交? (顯示彈出框報錯) --- alert
-->
<!--onsubmit 事件會在表單中的確認按鈕被點擊時發生-->
<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不同，‘=='判斷時，會將字符串轉換為整形進行比較，‘==='判斷是類型和值一起比較

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

基于某些條件對變量進行賦值的條件運算符。

<!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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實現表單注冊、表單驗證、運算符功能

推薦度：

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

標簽：驗證校驗 javascript

熱門焦點

JavaScript實現表單注冊、表單驗證、運算符功能

JavaScript實現表單注冊、表單驗證、運算符功能

JavaScript實現表單注冊、表單驗證、運算符功能

最新推薦

猜你喜歡

熱門推薦