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

更新時(shí)間：2018年10月15日 15:57:46 投稿：laozhang

在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊(cè)、表單驗(yàn)證、運(yùn)算符的代碼示例，有興趣的朋友們可以測(cè)試學(xué)習(xí)下。

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

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

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

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

特點(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>
  // 在頁(yè)面加載時(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)用戶名是否為空、密碼長(zhǎng)度是否大于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('密碼長(zhǎng)度需大于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>