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

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

在本篇文章里我們給大家整理了關于JavaScript中表單注冊、表單驗證、運算符的代碼示例，有興趣的朋友們可以測試學習下。

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

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

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

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

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

JS-注冊表單檢測雛形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-注冊表單</title>
 <script>
  // 在頁面加載時，執(zhí)行指定函數
  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-校驗表單

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

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>

您可能感興趣的文章:

一個不錯的仿攜程自定義數據下拉選擇select
這是一個仿攜程自定義的數據下拉選擇select，對一些比較重要的參數進行的描述，方便初學者
2014-09-09
淺析Echarts圖表渲染導致內存泄漏的原因及解決方案
在今年某個可視化大屏項目中,出現(xiàn)了一個問題,項目在運行一段時間后,頁面出現(xiàn)了崩潰,而且是大概運行幾天之后,因為大屏項目是部署到客戶現(xiàn)場大屏,長時間運行不關閉,小編認為 Echarts 圖表渲染導致了內存泄漏,本文將深入分析這一問題,并提供解決方案
2023-10-10
僅IE9/10同時支持script元素的onload和onreadystatechange事件分析
測試結果可以看出，IE9后已經開始支持script的onload事件了。一直以來我們判斷js文件是否已經加載完成就是用以上的兩個事件。
2011-04-04
echarts實現(xiàn)中國地圖下鉆進入下一級(地圖鉆取)
最近在學習echarts,今天就來介紹一下echarts實現(xiàn)中國地圖下鉆進入下一級,具有一定的參考價值,感興趣的可以了解一下
2023-08-08
小程序如何構建骨架屏
最近在移動端上面看到不同于菊花圖的加載方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"，下面我們來簡單了解一下吧
2019-05-05
JavaScript的ES5實現(xiàn)繼承的4種常用方法小結
繼承是面向對象軟件技術當中的一個概念,這篇文章主要為大家詳細介紹了JavaScript ES5實現(xiàn)繼承的4種常用方法,感興趣的小伙伴可以了解一下
2024-03-03
js數組中如何隨機取出一個值
這篇文章主要介紹了js數組中如何隨機取出一個值,需要的朋友可以參考下
2014-06-06
javascript完美拖拽的實現(xiàn)方法
這篇文章介紹了javascript完美拖拽的實現(xiàn)方法，有需要的朋友可以參考一下
2013-09-09
無縫滾動改進版支持上下左右滾動（封裝成函數）
無縫滾動改進版，封裝成函數，同時支持上下左右無縫滾動。
2012-12-12
JavaScript tab選項卡插件實例代碼
這篇文章主要介紹了JavaScript tab選項卡插件實例代碼的相關資料,需要的朋友可以參考下
2016-02-02