[研究][ASP.NET]輸入最小、最大長度、計算字數
2022-05-04
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
********************************************************************************
使用 HTML5
HTML 的 input 標籤 (HTML Tag) 有 maxlength 可以限制輸入的最大長度 (全形、半形都算1個)，長度到達就無法再輸入。
例如最大 50 字：
<input type="text" maxlength="50"> |
但 input 標籤沒有 minlength 限制輸入最短長度。
到了 HTML5，input 標籤多了 pattern 屬性，可以使用正規運算式 (正規表示式，Regular Expression) 限制輸入格式，包含最小、最大長度；但 pattern 僅支援 input 在 type 為 text, search, tel, url, email, password 時才會生效。
至少12碼的密碼，限制使用大小寫英文和數字
<input type="password" pattern="[a-zA-Z0-9]{12,}"> |
必須至少12碼，組成須含英文大小寫、數字以及特殊符號@#$%^&+=
<input type="password" pattern="^.*(?=.{12,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).*$"> |
公司統編
<input type="text" pattern="\d{8}"> |
句點表示符合除「\r」「\n」之外的任何單個字元。至少50字，至多200字。
required="required" 是 HTML5 的必填設定，離開填寫欄位時會進行檢查
title 也是 HTML5 的屬性，條件不滿足時，會顯示 title 設定的文字 (title 不設定會有預設顯示的文字)
<input type="text" required="required" title="50~200個字" pattern=".{50,200}"> |
IPv4 的 IP address
至少12碼的密碼，限制使用大小寫英文和數字
<input type="text" pattern="^([1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])(\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$"> |
HTML5 Pattern網站 有些可以參考
********************************************************************************
使用 JavaScript
Default.aspx
<%@ 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>
<script type="text/javascript">
function checkLength(which) {
var maxChars = 10; //
if (which.value.length > maxChars) {
alert("您出入的字數超多限制!");
// 超過長度的切掉
which.value = which.value.substring(0, maxChars);
return false;
}
else {
var curr = maxChars - which.value.length; //減去當前輸入的
document.getElementById("CountLength").innerHTML = curr.toString();
return true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" onkeyup="checkLength(this);">
</asp:TextBox>
<br />
限制字數為：10 剩餘字數：<span id="CountLength" style="color:red;">10</span>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
|
結果
使用ASP.NET前端
ASP.NET 有一堆驗證控制項 ( ASP.NET Validation controls )
範例
Default.aspx
<%@ 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">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1"
runat="server" ErrorMessage="必填" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" ControlToValidate="TextBox1"
runat="server" MinimumValue="1" MaximumValue="10" Display="Dynamic"
Type="Integer" EnableClientScript="false" Text="限填數值1~10" ForeColor="Red"
ErrorMessage="限填1~10"></asp:RangeValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
|
Default.aspx.cs
using System;
using System.Web.UI;
namespace WebApplication1
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}
}
}
|
執行後，輸入文字，按下按鈕就會進行檢查
<asp:RangeValidator 控制項若有 Text 屬性，不符合時會顯示 Text 的文字；若無 Text 屬性，則顯示 ErrorMessage 的文字。若 Text 和 ErrorMessage 屬性都無設定，不符則無任何警告文字。
檢視執行結果的 HTML Source
|
其時驗證控制項 ( ASP.NET Validation controls ) 被 IIS 轉成 JavaScript，屬於前端程式。
********************************************************************************
因為前端的程式碼，是可被駭客繞過的，所以不管前端是否有程式或屬性進行限制，Server 端程式仍要再建查一次。
********************************************************************************
使用ASP.NET後端
參考這裡有範例
Regex.IsMatch 方法 (System.Text.RegularExpressions) | Microsoft Docs
https://docs.microsoft.com/zh-tw/dotnet/api/system.text.regularexpressions.regex.ismatch?view=net-6.0
(完)
相關
[研究]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
[研究]HTML5 的 input 標籤的 type 屬性的各種值
https://shaurong.blogspot.com/2022/04/html5-input-type.html
[研究][ASP.NET]HTML5 的 input 標籤的 type 屬性的 日期、月曆測試
https://shaurong.blogspot.com/2022/04/html5-input-type_12.html
規則運算式語言 - 快速參考 | Microsoft Docs
https://docs.microsoft.com/zh-tw/dotnet/standard/base-types/regular-expression-language-quick-reference
使用規則運算式 - Visual Studio (Windows) | Microsoft Docs
https://docs.microsoft.com/zh-tw/visualstudio/ide/using-regular-expressions-in-visual-studio?view=vs-2022
.NET 規則運算式 | Microsoft Docs
https://docs.microsoft.com/zh-tw/dotnet/standard/base-types/regular-expressions
.NET 規則運算式中的字元類別 | Microsoft Docs
https://docs.microsoft.com/zh-tw/dotnet/standard/base-types/character-classes-in-regular-expressions
Regex.IsMatch 方法 (System.Text.RegularExpressions) | Microsoft Docs
https://docs.microsoft.com/zh-tw/dotnet/api/system.text.regularexpressions.regex.ismatch?view=net-6.0
.NET 規則運算式中的字元逸出 | Microsoft Docs
https://docs.microsoft.com/zh-tw/dotnet/standard/base-types/character-escapes-in-regular-expressions
沒有留言:
張貼留言