JavaScript中常用的輸入輸出語句介紹

日常開發(fā)中，為了方便數(shù)據(jù)的輸入和輸出，JavaScript提供了一些常用的輸入輸出語句，具體如表1-3所示。
表1常用的輸入輸出語句

類型	語句	說明
輸入	prompt()	用于在瀏覽器中彈出輸入框，用戶可以輸入內(nèi)容
輸出	alert()	用于在瀏覽器中彈出警告框
	document.write()	用于在網(wǎng)頁中輸出內(nèi)容
	console.log()	用于在控制臺中輸出信息

接下來將分別演示document.write0、console.log0和promptO的使用。

1. document.write()

document.write0的輸出內(nèi)容中如果含有HTML標簽，會被瀏覽器解析。下面利用documenL.write0在頁面中輸出“我是document.write0語句!”，示例代碼如下。

document.write('我是document.write()語句！');

2. console.log()

利用console.log0語句在控制臺輸出“我是console.log0語句!”，示例代碼如下。

console.log('我是console.log()語句!');

console:.log0的輸出結(jié)果需要在瀏覽器的控制臺中查看。在Chrome 瀏覽器中按“F12”鍵(或在網(wǎng)頁空白區(qū)域右擊，在彈出的菜單中選擇“檢查”)啟動開發(fā)者工具，然后切換到“Console”(控制臺)面板，即可看到console.log0的輸出結(jié)果。

3.prompt()

利用prompt0語句實現(xiàn)在頁面中彈出一個帶有提示信息的輸入框，示例代碼如下。

prompt(請輸入姓名：');

上述示例代碼運行后，將在頁面中彈出一個輸人框并提示用戶“請輸人姓名：”提示框。

、知識點

1、JS支持事件處理業(yè)務(wù)邏輯模型，常用事件

Click 單擊

Dblclick 雙擊

Focus 聚焦

Blur 失去焦點

Mouseover 鼠標懸停

Mousemove 鼠標移動

Mouseout 鼠標移開

Change 改變

Load 頁面加載

Keydown 鍵按下

2、調(diào)用

找到對應(yīng)的標簽，加上屬性 on事件關(guān)鍵字=”JS代碼”。一般調(diào)用的JS代碼邏輯很復(fù)雜，會用函數(shù)封裝。

3、DOM操作：Document Object Model，文檔對象模型。網(wǎng)頁文檔由一個個的HTML標簽組成，操作網(wǎng)頁組成元素（標簽）。

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

4、表單提交

方式一：document.getElementById("form1").submit();

方式二：提交按鈕類型設(shè)置為submit，調(diào)用的函數(shù)必須要有一個返回值，返回false不提交，true提交；調(diào)用函數(shù)時前面再加個return 關(guān)鍵字。

5、回車驗證的實現(xiàn)。利用用戶敲擊鍵盤判斷用戶按下的是回車鍵調(diào)用檢測函數(shù)即可。

6、事件參數(shù)：event代表對應(yīng)的標簽執(zhí)行的動作。比如文本框按下鍵判斷是不是回車

Onkeydown=”Test(event);”
<script>
function Test(e){
var e=e||window.event;
if(e.keyCode==13){}
}
</script>

鼠標懸停，顯示該位置坐標（相對）

Onmouseover=”alert(event.clientX+”|”+event.clientY);”

二、表單驗證

示例源碼：

<html>
<head><title>XXX 用戶注冊</title></head>
<body style="margin-left:auto; margin-right:auto; text-align:center;">
<form name="form1" id="form1" action="register.php" method="post">
<table>
<caption><h3>用戶注冊</h3></caption>
<tr><th>用戶名：</th><td><input onKeyDown="EnterCheck(event);" name="loginid" id="loginid" placeholder="請輸入用戶名" /></td></tr>
<tr><th>密碼：</th><td><input name="pwd" id="pwd" type="password" placeholder="請輸入密碼" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>確認密碼：</th><td><input name="repwd" id="repwd" type="password" placeholder="請輸入確認密碼" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>昵稱：</th><td><input type="text" name="uname" id="uname" placeholder="請輸入昵稱" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>性別：</th><td><input type="radio" checked id="sex" name="sex" />男<input name="sex" type="radio" id="sex" />女
</td></tr>
<tr><th>喜歡的顏色：</th><td>
<select name="ucolor" id="ucolor">
<option selected value="0">==請選擇==</option>
<option value="red">--紅色--</option>
<option value="green">--綠色--</option>
<option value="blue">--藍色--</option>
</select>
</td></tr>
<tr><th>愛好：</th><td><input value="playcomputer" name="cbof[]" id="cbof[]" type="checkbox">玩電腦
<input type="checkbox" value="readingbook" name="cbof[]" id="cbof[]" >看書
<input type="checkbox" value="dosporting" name="cbof[]" id="cbof[]">做運動
</td></tr>
<tr><th>個人簡介：</th><td>
<textarea rows="4" name="describe" id="describe" onKeyDown="EnterCheck(event);"></textarea>
</td></tr>
<tr><td></td><td>
<input type="button" value="提交" onClick="return CheckInput();">
<input type="reset" value="重置">
<input type="button" value="取消">
</td></tr>
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
//驗證用戶輸入
function CheckInput(){
var result=false;
//獲取用戶名文本框?qū)ο?/p>
var loginid=document.getElementById("loginid");
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var uname=document.getElementById("uname");
var ucolor=document.getElementById("ucolor");
var describe=document.getElementById("describe");
if(CheckIsSafeInputText(loginid,"用戶名")){}
else if(CheckIsSafeInputText(pwd,"密碼")){}
else if(repwd.value!=pwd.value){
alert("密碼與確認密碼不一致");
repwd.focus();
}
else if(CheckIsSafeInputText(uname,"昵稱")){}
else if(ucolor.value=="0"){
alert("請至少選擇一個喜歡的顏色");
ucolor.focus();
}
else if(describe!=null && describe.value.length>256){
alert("個人簡介不得超出256個字符");
describe.focus();
}
else
//document.getElementById("form1").submit();
result=true;
return result;
}
//驗證文本框是否合法，非法返回true，合法返回false
function CheckIsSafeInputText(obj,msg){
var result=true;
if(obj==null || obj.value=="")
{
alert(msg+"不得為空");//+為字符串連接符
obj.focus();
}
else if(obj.value.length<4 || obj.value.length>16){
alert(msg+"長度在4~16個字符以內(nèi)");
obj.focus();
}
else
result=false;
return result;
}
//回車驗證
function EnterCheck(e){
var e=e || window.event;
if(e.keyCode==13)
CheckInput();
}
</script>
</html>

三、JS外鏈

JS的代碼抽出去作為一個單獨的文件，命名要對應(yīng)，相應(yīng)的頁面通過<script language="javascript" type="text/javascript" src="相對路徑"></script>來調(diào)用

現(xiàn)代web開發(fā)中，表單是用戶與網(wǎng)站互動的重要方式之一。HTML5為表單提交提供了強大的功能和豐富的輸入類型，讓收集和驗證用戶輸入數(shù)據(jù)變得更加容易和安全。本文將詳細介紹HTML5表單的各個方面，包括基本結(jié)構(gòu)、輸入類型、驗證方法和提交過程。

基本結(jié)構(gòu)

HTML表單由<form>標簽定義，它可以包含輸入字段、標簽、按鈕等元素。一個基本的表單結(jié)構(gòu)如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標簽，這不僅有助于用戶理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數(shù)據(jù)格式和設(shè)備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數(shù)值輸入

<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國</option>
  <option value="usa">美國</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗證方法

HTML5表單提供了內(nèi)置的驗證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進行檢查。

必填字段

<input type="text" name="username" required>

正則表達式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數(shù)的郵政編碼">

數(shù)值范圍

<input type="number" name="age" min="18" max="99">

長度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當用戶填寫完表單并點擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來自定義驗證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數(shù)據(jù)
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯誤處理
  }
  // 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創(chuàng)建一個FormData對象
  var formData = new FormData(form);
  
  // 創(chuàng)建一個空對象來存儲表單數(shù)據(jù)
  var formObject = {};
  
  // 將FormData轉(zhuǎn)換為普通對象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對象轉(zhuǎn)換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對話框
  alert(jsonString);
  
  // 阻止表單的默認提交行為
  return false;
}
</script>

</body>
</html>

在這個例子中：

我們定義了一個包含姓名和電子郵件輸入字段的表單，以及一個按鈕，當點擊按鈕時會調(diào)用submitForm函數(shù)。
在submitForm函數(shù)中，我們首先獲取表單元素并創(chuàng)建一個FormData對象。然后，我們遍歷FormData對象，將表單數(shù)據(jù)復(fù)制到一個普通的JavaScript對象formObject中。
接著，我們使用JSON.stringify方法將formObject轉(zhuǎn)換成JSON字符串。
最后，我們使用alert函數(shù)彈出一個包含JSON字符串的對話框。

注意，這個例子中我們使用了type="button"而不是type="submit"，因為我們不希望表單有默認的提交行為。我們的JavaScript函數(shù)submitForm會處理所有的邏輯，并且通過返回false來阻止默認的表單提交。如果你想要使用type="submit"，你需要在<form>標簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結(jié)論

HTML5的表單功能為開發(fā)者提供了強大的工具，以便創(chuàng)建功能豐富、用戶友好且安全的網(wǎng)站。通過使用HTML5的輸入類型和驗證方法，可以確保用戶輸入的數(shù)據(jù)是有效的，同時提高用戶體驗。隨著技術(shù)的不斷進步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。

在線咨詢

上一篇：tomcat8.5+ windows中html頁面及控制臺中文亂碼問題解決辦法
下一篇：HTML相關(guān)知識之文檔聲明標簽-HTML學習之路（2）

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商