[研究]HTML5必填欄位檢查 required
2022-04-12、2023-01-18
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
發現 HTML5 本身就有必填欄位檢查的屬性 required，或寫成 required="required"
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" required></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server" required="required"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
|
(下圖) 執行後，按下按鈕，若未填寫會跳出「請填寫這個欄位」(Chrome、Edge)、「這是必要欄位」(IE11)、「請填此欄位」(FireFox)
**********
另外 <input type="值"> 在 HTML5 多了一些輸入限制功能可方便使用。
button 可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本）。
checkbox 核取方塊。
color (HTML5) 拾色器。
date (HTML5) date 控件（包括年、月、日，不包括時間）。
datetime (HTML5) date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區）。
datetime-local (HTML5) date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。
email (HTML5) 用於 e-mail 地址的字段。
file 文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。
hidden 隱藏輸入字段。
image 圖像作為提交按鈕。
month (HTML5) month 和 year 控件（不帶時區）。
number (HTML5) 用於輸入數字的字段。
password 密碼字段（字段中的字符會被遮蔽）。
radio 單選按鈕。
range (HTML5) 用於精確值不重要的輸入數字的控件（比如 slider 控件）。
reset 重置按鈕（重置所有的表單值為預設值值）。
search (HTML5) 用於輸入搜索字符串的文本字段。
submit 提交按鈕。
tel (HTML5) 用於輸入電話號碼的字段。
text 預設值。一個單行的文本字段（預設值寬度為 20 個字符）。
time (HTML5) 用於輸入時間的控件（不帶時區）。
url (HTML5) 用於輸入 URL 的字段。
week (HTML5) week 和 year 控件（不帶時區）。
********************************************************************************
2023-01-18 補充，在 DetailView 控制項中使用 required="required" ，無效，檢查 HTML Source，插入按鈕是
<a id="MainContent_DetailsView1_LinkButton1" href="javascript:__doPostBack('ctl00$MainContent$DetailsView1$LinkButton1','')">插入</a> |
不知是否因為這個關係。
********************************************************************************
(完)
相關
[研究]HTML5必填欄位檢查 required
https://shaurong.blogspot.com/2022/04/html5-required.html
[研究][ASP.NET][JavaScript]離開填寫欄位時，檢查必填並彈出alert對話盒視窗
https://shaurong.blogspot.com/2022/04/aspnetjavascriptalert.html
[研究] NuGet 對 jQuery.Validation 1.19.2 安裝測試
https://shaurong.blogspot.com/2020/08/nuget-jqueryvalidation-1192.html
沒有留言:
張貼留言