How to Validate IPv4, IPv6, and Hostnames in .NET: Client-Side Regular Expression Solutions

Table of Contents#

1. Understanding the Basics: IPv4, IPv6, and Hostnames
   • IPv4 Addresses
   • IPv6 Addresses
   • Hostnames
2. Client-Side Validation in .NET
   • Blazor (Server/WebAssembly)
   • MVC/Razor Pages
3. Regular Expressions for Validation
   • IPv4 Validation Regex
   • IPv6 Validation Regex
   • Hostname Validation Regex
4. Implementation Examples
   • Blazor Example
   • MVC/Razor Pages Example
5. Testing Edge Cases
6. Best Practices
7. Conclusion
8. References

Understanding the Basics: IPv4, IPv6, and Hostnames#

Before diving into regex, let’s clarify the structure of the inputs we’re validating.

IPv4 Addresses#

IPv4 addresses are 32-bit numerical identifiers formatted as four decimal "octets" (8-bit values) separated by dots (.). Each octet ranges from 0 to 255.

Example: 192.168.1.1, 8.8.8.8
Invalid: 256.0.0.1 (octet exceeds 255), 192.168.1 (missing octet).

IPv6 Addresses#

IPv6 addresses are 128-bit identifiers formatted as eight "hextets" (16-bit values) separated by colons (:). Each hextet is a 1-4 character hexadecimal string (0-9, a-f, A-F). Consecutive zero-hextets can be compressed with :: (but only once per address).

Example: 2001:0db8:85a3:0000:0000:8a2e:0370:7334 (full), 2001:db8::8a2e:370:7334 (compressed), ::1 (loopback).
Invalid: 2001::db8::1 (multiple ::), 2001:db8:g:1 (invalid hex character g).

Hostnames#

Hostnames identify devices on a network (e.g., example.com, server-01). They consist of "labels" separated by dots (.). Rules:

• Labels: 1-63 characters, start/end with alphanumerics, may contain hyphens (-).
• Total length: ≤253 characters.
• ASCII-only (for standard validation; internationalized hostnames use IDN, covered briefly later).

Example: blog.example.co.uk, my-server-1.
Invalid: my_server (underscore not allowed), -example.com (label starts with hyphen), a.very.long.hostname.that.exceeds.253.characters................... (too long).

Client-Side Validation in .NET#

.NET provides built-in tools for client-side validation, ensuring inputs are checked in the browser before submission. Key frameworks include:

Blazor (Server/WebAssembly)#

Blazor uses EditForm with DataAnnotationsValidator to enforce validation rules defined via data annotations (e.g., [RegularExpression]). Client-side validation runs in the browser using .NET’s WebAssembly runtime (Blazor WebAssembly) or via SignalR (Blazor Server), providing immediate feedback.

MVC/Razor Pages#

MVC/Razor Pages use jQuery Unobtrusive Validation, which parses data annotations (e.g., [RegularExpression]) and generates client-side validation logic automatically. This relies on jQuery and jquery.validate.js.

In both cases, regex-based validation is implemented via the [RegularExpression] attribute, which we’ll leverage to validate IPv4, IPv6, and hostnames.

Regular Expressions for Validation#

Regex is a powerful tool for pattern matching. Below are tailored regex patterns for each input type, designed to balance accuracy and performance for client-side use.

IPv4 Validation Regex#

Goal: Match strings with four octets (0-255) separated by dots.

Regex Pattern:#

^(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$

Breakdown:#

• ^/$: Anchor to match the entire string (no partial matches).
• (?:...): Non-capturing group (groups regex without capturing).
• 25[0-5]: Matches 250-255 (e.g., 250, 255).
• 2[0-4][0-9]: Matches 200-249 (e.g., 200, 249).
• [01]?[0-9][0-9]?: Matches 0-199 (e.g., 0, 99, 199; ? makes leading digits optional).
• \.: Escaped dot (literal dot separator).

IPv6 Validation Regex#

Goal: Match 8 hextets (with optional :: compression) and valid hex characters.

Regex Pattern (Simplified for Common Use Cases):#

^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,7}:$|^(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}$|^(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}$|^(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}$|^(?:[0-9a-fA-F]{1,4}:)(?::[0-9a-fA-F]{1,4}){1,6}$|^:(?::[0-9a-fA-F]{1,4}){1,7}$|^::$

Breakdown:#

This regex handles all :: compression scenarios by enumerating possible hextet counts before/after :::

• [0-9a-fA-F]{1,4}: Valid hextet (1-4 hex chars).
• (?:...){n}: Repeats the group n times (e.g., {7} for 7 hextets before the 8th).
• (?::...): Non-capturing group for compressed zero-hextets.

Note: Full RFC 8200 compliance is complex (e.g., IPv4-mapped IPv6 addresses). This regex covers standard use cases; extend for edge cases if needed.

Hostname Validation Regex#

Goal: Match valid labels with length/character rules.

Regex Pattern:#

^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$

Breakdown:#

• [a-zA-Z0-9]: Label starts with alphanumeric.
• (?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?: Optional middle segment (hyphens allowed, 0-61 chars, ends with alphanumeric).
• \.: Dot separator between labels.
• +: Ensures at least one label (e.g., localhost).

Implementation Examples#

Let’s integrate these regex patterns into .NET client-side validation.

Blazor Example#

1. Model with Data Annotations:
   Define a model with [RegularExpression] attributes, using the regex patterns.

   using System.ComponentModel.DataAnnotations;
    
   public class NetworkInputModel
   {
       [Display(Name = "IPv4 Address")]
       [RegularExpression(@"^(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$", 
           ErrorMessage = "Invalid IPv4 address (e.g., 192.168.1.1)")]
       public string? Ipv4Address { get; set; }
    
       [Display(Name = "IPv6 Address")]
       [RegularExpression(@"^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,7}:$|^(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}$|^(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}$|^(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}$|^(?:[0-9a-fA-F]{1,4}:)(?::[0-9a-fA-F]{1,4}){1,6}$|^:(?::[0-9a-fA-F]{1,4}){1,7}$|^::$", 
           ErrorMessage = "Invalid IPv6 address (e.g., 2001:db8::1)")]
       public string? Ipv6Address { get; set; }
    
       [Display(Name = "Hostname")]
       [RegularExpression(@"^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$", 
           ErrorMessage = "Invalid hostname (e.g., example.com)")]
       public string? Hostname { get; set; }
   }

2. Blazor Component with Validation:
   Use EditForm and DataAnnotationsValidator to enable client-side validation.

   @page "/validate-network"
   @using System.ComponentModel.DataAnnotations
    
   <EditForm Model="@model" OnValidSubmit="@HandleSubmit">
       <DataAnnotationsValidator />
       <ValidationSummary />
    
       <div class="mb-3">
           <label>IPv4 Address:</label>
           <InputText @bind-Value="model.Ipv4Address" class="form-control" />
           <ValidationMessage For="@(() => model.Ipv4Address)" />
       </div>
    
       <div class="mb-3">
           <label>IPv6 Address:</label>
           <InputText @bind-Value="model.Ipv6Address" class="form-control" />
           <ValidationMessage For="@(() => model.Ipv6Address)" />
       </div>
    
       <div class="mb-3">
           <label>Hostname:</label>
           <InputText @bind-Value="model.Hostname" class="form-control" />
           <ValidationMessage For="@(() => model.Hostname)" />
       </div>
    
       <button type="submit" class="btn btn-primary">Submit</button>
   </EditForm>
    
   @code {
       private NetworkInputModel model = new();
    
       private void HandleSubmit()
       {
           // Submit logic (server-side validation should still occur here)
       }
   }

MVC/Razor Pages Example#

1. Model with Data Annotations:
   Same model as Blazor (data annotations are framework-agnostic).

2. Razor View with Validation:
   MVC/Razor Pages auto-generate client-side validation via jQuery Unobtrusive Validation.

   @model NetworkInputModel
    
   <form asp-action="Validate">
       <div class="mb-3">
           <label asp-for="Ipv4Address"></label>
           <input asp-for="Ipv4Address" class="form-control" />
           <span asp-validation-for="Ipv4Address" class="text-danger"></span>
       </div>
    
       <div class="mb-3">
           <label asp-for="Ipv6Address"></label>
           <input asp-for="Ipv6Address" class="form-control" />
           <span asp-validation-for="Ipv6Address" class="text-danger"></span>
       </div>
    
       <div class="mb-3">
           <label asp-for="Hostname"></label>
           <input asp-for="Hostname" class="form-control" />
           <span asp-validation-for="Hostname" class="text-danger"></span>
       </div>
    
       <button type="submit" class="btn btn-primary">Submit</button>
   </form>
    
   @section Scripts {
       @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
   }

   Ensure _ValidationScriptsPartial.cshtml includes jQuery and validation scripts (added by default in MVC templates).

Testing Edge Cases#

Validate regex patterns with these test cases to ensure robustness:

Best Practices#

1. Combine Client/Server Validation: Client-side validation improves UX, but server-side validation is mandatory (browsers can bypass client checks).
2. Escape Regex in C#: Use @"..." verbatim strings for regex to avoid escaping backslashes (e.g., @"\." instead of "\\.").
3. Test Performance: Regex can lag with malformed inputs (e.g., 10,000-character hostnames). Use tools like RegexHero to profile.
4. IDN Hostnames: For internationalized hostnames (e.g., café.com), convert to Punycode (ASCII) before validation (use System.Globalization.IdnMapping).

Conclusion#

Validating IPv4, IPv6, and hostnames in .NET client-side is achievable with precise regex patterns and data annotations. By integrating these into Blazor or MVC/Razor Pages, you ensure immediate user feedback while maintaining security. Always pair client-side checks with server-side validation, and test rigorously to cover edge cases.

References#

• RFC 791 (IPv4)
• RFC 8200 (IPv6)
• RFC 1123 (Hostnames)
• .NET Data Annotations
• Blazor Validation
• MVC Client-Side Validation