{"id":70366,"date":"2022-05-23T08:00:04","date_gmt":"2022-05-23T06:00:04","guid":{"rendered":"https:\/\/drafts.code-maze.com\/?p=69629"},"modified":"2022-05-23T08:17:03","modified_gmt":"2022-05-23T06:17:03","slug":"validate-input-regular-expressions-blazor-webassembly","status":"publish","type":"post","link":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/","title":{"rendered":"Validate User Input With Regular Expressions in Blazor WebAssembly"},"content":{"rendered":"

In this article, we are going to learn how to use regular expressions for user input validation in Blazor WebAssembly applications.<\/p>\n

To download the source code for this article, you can visit our GitHub repository<\/a>.<\/div>\n

Let’s get started.<\/p>\n

Regular Expressions<\/h2>\n

Regular expressions (regex<\/em> or regexp<\/em> for short) are character sequences that we use to match patterns on strings. Every major programming language has a regex engine embedded in it and C#, of course, is no exception.<\/p>\n

When working in a Blazor WebAssembly application, we can easily embed complex validations in our data model using regular expressions in combination with data annotations.<\/p>\n

Example Project: Employee Registration Form<\/h2>\n

To test all our examples we are going to create a simple Blazor WebAssembly client application. It hosts a single page with a hypothetical employee registration form.<\/p>\n

We will create a new Blazor WebAssembly project and add an EmployeeRegistration.razor<\/code> page and a model for our form in EmployeeRegistrationModel.cs<\/code> :<\/p>\n

\"Regex<\/a><\/p>\n

Basic Model With Data Annotations<\/h3>\n

Now, let’s add the EmployeeRegistrationModel<\/code> class. It contains properties matching each of the data fields in our form:<\/p>\n

using System.ComponentModel.DataAnnotations;\r\n\r\nnamespace UserInputValidationWithRegex.Models\r\n{\r\n    public class EmployeeRegistrationModel\r\n    {\r\n        [Required]\r\n        public string Name { get; set; }\r\n\r\n        [Required]\r\n        public string Address { get; set; }\r\n\r\n        [Required]\r\n        public string ZipCode { get; set; }\r\n\r\n        [Required]\r\n        public string SocialSecurityNumber { get; set; }\r\n\r\n        [Required]\r\n        public string Email { get; set; }\r\n\r\n        [Required]\r\n        public string Username { get; set; }\r\n\r\n        [Required]\r\n        public string Password { get; set; }\r\n\r\n        [Required]\r\n        public string PhoneNumber { get; set; }\r\n    }\r\n}<\/pre>\n
First, we include the data annotations namespace. Then, we use the Required<\/code> attribute to make all fields mandatory. Yes, we will ask our users to fill out our form completely.\u00a0<\/p>\n
Next, our page component will be based on a standard EditForm<\/code> component, some input controls, and a couple of other validation related components:<\/p>\n
        @page \"\/\"\r\n\r\n@using UserInputValidationWithRegex.Models\r\n\r\n<PageTitle>@pageTitle<\/PageTitle>\r\n<h1>@pageTitle<\/h1>\r\n\r\n<EditForm Model=\"@model\" OnValidSubmit=\"@HandleValidSubmit\">\r\n    <DataAnnotationsValidator \/>\r\n    <ValidationSummary \/>\r\n\r\n    <div class=\"mb-3 col-9\">\r\n        <label for=\"name\" class=\"form-label\">Employee Name<\/label>\r\n        <InputText id=\"name\" class=\"form-control\" @bind-Value=\"model.Name\" aria-describedby=\"nameHelp\" \/>\r\n        <div id=\"nameHelp\" class=\"form-text\">Employee's first, middle and last names.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mb-3 col-9\">\r\n        <label for=\"address\" class=\"form-label\">Address<\/label>\r\n        <InputText id=\"address\" class=\"form-control\" @bind-Value=\"model.Address\" aria-describedby=\"addressHelp\" \/>\r\n        <div id=\"addressHelp\" class=\"form-text\">Employee's address.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mb-3 col-5\">\r\n        <label for=\"zipCode\" class=\"form-label\">Zip Code<\/label>\r\n        <InputText id=\"zipCode\" class=\"form-control\" @bind-Value=\"model.ZipCode\" aria-describedby=\"zipCodeHelp\" \/>\r\n        <div id=\"zipCodeHelp\" class=\"form-text\">Zip Code.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mb-3 col-5\">\r\n        <label for=\"socialSecurityNumber\" class=\"form-label\">Social Security Number<\/label>\r\n        <InputText id=\"socialSecurityNumber\"\r\n                   class=\"form-control\"\r\n                   @bind-Value=\"model.SocialSecurityNumber\"\r\n                   aria-describedby=\"socialSecurityNumberHelp\" \/>\r\n        <div id=\"socialSecurityNumberHelp\" class=\"form-text\">Employee's social security number.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mb-3 col-9\">\r\n        <label for=\"email\" class=\"form-label\">E-Mail<\/label>\r\n        <InputText id=\"email\" class=\"form-control\" @bind-Value=\"model.Email\" aria-describedby=\"emailHelp\" \/>\r\n        <div id=\"emailHelp\" class=\"form-text\">We'll never share your email with anyone else.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mb-3 col-9\">\r\n        <label for=\"username\" class=\"form-label\">Username<\/label>\r\n        <InputText id=\"username\" class=\"form-control\" @bind-Value=\"model.Username\" aria-describedby=\"usernameHelp\" \/>\r\n        <div id=\"usernameHelp\" class=\"form-text\">Choose a unique username.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mb-3 col-9\">\r\n        <label for=\"password\" class=\"form-label\">Password<\/label>\r\n        <InputText type=\"password\"\r\n                   id=\"password\"\r\n                   class=\"form-control\"\r\n                   @bind-Value=\"model.Password\"\r\n                   aria-describedby=\"passwordHelp\" \/>\r\n        <div id=\"passwordHelp\" class=\"form-text\">Choose a strong password.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mb-3 col-9\">\r\n        <label for=\"phone\" class=\"form-label\">Phone Number<\/label>\r\n        <InputText id=\"phone\" class=\"form-control\" @bind-Value=\"model.PhoneNumber\" aria-describedby=\"phoneHelp\" \/>\r\n        <div id=\"phoneHelp\" class=\"form-text\">Main contact phone number.<\/div>\r\n    <\/div>\r\n\r\n    <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n\r\n<\/EditForm>\r\n\r\n@code {\r\n    private string pageTitle = \"Employee Registration Form\";\r\n    private EmployeeRegistrationModel model = new();\r\n\r\n    private void HandleValidSubmit()\r\n    {\r\n        \/\/ TODO: Handle form data\r\n    }\r\n}\r\n<\/pre>\n
Right after the page directive, we include our Models namespace so this page has access to our EmployeeFormModel<\/code> class.<\/p>\n
The next important element is our EditForm<\/code> component, whose Model<\/code> attribute is set to a private field model<\/code> defined in the code section at the bottom of the page. Also, we will set the form’s OnValidSubmit<\/code> attribute to the HandleValidInput<\/code> private method defined in the code section as well.<\/p>\n
We must add a ValidationSummary<\/code> component inside our form so all the validation messages are displayed on the screen. Also, a DataAnnotationsValidator<\/code> inspects our form’s model object and calls validation against data annotations.<\/p>\n
Finally, we add a set of InputText<\/code> components and a simple submit button. We bind InputText<\/code> components to each of our model’s properties using the @bind-Value<\/code> directive.<\/p>\n
To learn more about the form validation in Blazor WebAssembly, you can read our article here<\/a>. Also, if you want to see the custom validation in action, you can read more about that here<\/a>.<\/div>\n
At this point, we should be able to successfully run our project and enter data in our form. If you try to submit the form leaving some fields empty the Required<\/code> annotations we have already in place should trigger some validation error messages:<\/p>\n
\"Regular<\/a><\/p>\n
Perfect. But that’s not what we’re here for.<\/p>\n
Validate Blazor WebAssembly Form Fields With Regex<\/h2>\n
Now let’s explore how we can use regular expressions to easily implement more complex validations.<\/p>\n
Employee Name<\/h3>\n
We want all employee names in our database to be as authentic as possible. One step we can take towards that is to check that the data input in that field looks like a person’s name.<\/p>\n
Considering only the English language, a typical person’s name will be composed of uppercase and lowercase letters, spaces, and symbols like periods .<\/code>, hyphens -<\/code> or apostrophes '<\/code>. On the other hand, a person’s name would never contain numeric characters or symbols like backslashes \\<\/code> or asterisks *<\/code>. Finally, we consider that any given name must be a minimum of two characters long.<\/p>\n
Let’s come up with a regular expression that checks all of the previous conditions and apply it to our form model using data annotations:<\/p>\n
[Required]\r\n[RegularExpression(@\"^[a-zA-Z\\s.\\-']{2,}$\", ErrorMessage = \"Employee name contains invalid characters.\")]\r\npublic string Name { get; set; }<\/pre>\n
Creating regular expressions is a deep topic and we won’t be explaining the basics. For now, we are good knowing that a-z<\/code> and A-Z<\/code> both match the ranges of characters that together comprehend all letters in the alphabet regardless of their case. At the same time, \\s<\/code> matches spaces, .<\/code> periods and '<\/code> apostrophes. We must escape the hyphen \\-<\/code> to avoid ambiguities with the range syntax. Finally, {2,}<\/code> is a quantifier and validates that the total length of the string is equaled to or exceeds two.<\/p>\n
That’s it, we have implemented a relatively complex validation logic with a single line of code:<\/p>\n
\"Regular<\/a><\/p>\n
Address<\/h3>\n
Addresses usually contain a street number and name at the beginning. Following that, we will require to enter the city name and state separated by a period. These are some examples of valid addresses:<\/p>\n
23839 Arroyo Park Rd. Dayton, Minnesota(MN)\r\n365 Payson St. San Dimas, California(CA)<\/pre>\n
A new expression to match all that logic will be significantly more complex. However, its building blocks remain the same:<\/p>\n
[Required]\r\n[RegularExpression(@\"^[0-9]+\\s[a-zA-Z\\s\\-']{2,}.\\s?[a-zA-Z\\s\\(\\),]{2,}$\", ErrorMessage = \"Wrong address format.\")]\r\npublic string Address { get; set; }<\/pre>\n
Here, we use a series of character matchers and quantifiers along with some fixed characters to define the different sections of our address format.<\/p>\n
For instance, [0-9]+<\/code> will match a street number with one or more digits followed by a fixed space \\s<\/code>. Next, the street name matcher [a-zA-Z\\s\\-']{2,}<\/code> accepts at least two letters followed by a period and an optional space .\\s?<\/code> and so on.<\/p>\n
Zip Code<\/h3>\n
Zipcodes in the United States come in two flavors: A basic zip code is just five digits. There are, as well, extended codes adding four extra digits that may or may not be separated from the first five by a hyphen.<\/p>\n
According to that, all these would valid zipcodes:<\/p>\n
12345\r\n12345-6789\r\n123456789<\/pre>\n
To build a regular expression that matches exactly our rules for zip codes we will use the alternate token |<\/code>. We will provide two expressions and get a positive match whenever the input string fits either one or the other:\u00a0<\/p>\n
[Required]\r\n[RegularExpression(@\"^[0-9]{5}$|^[0-9]{5}-?[0-9]{4}$\", ErrorMessage = \"Invalid zipcode format\")]\r\npublic string ZipCode { get; set; }<\/pre>\n
Social Security Number<\/h3>\n
United States’ social security number format is 000-00-0000<\/code>. However, not all digits are valid in every position. For instance, 666<\/code> or 900<\/code> to 999<\/code> aren’t valid for the first segment and none of the segments can consist of only zeros.<\/p>\n
This time, we use the negative lookahead assertion ?!<\/code> to ensure that a certain set of expressions do not match the pattern without consuming string positions itself:<\/p>\n
[Required]\r\n[RegularExpression(@\"^(?!(000|666|9))\\d{3}-(?!00)\\d{2}-(?!0000)\\d{4}$\", ErrorMessage = \"Invalid SSN\")]\r\npublic string SocialSecurityNumber { get; set; }<\/pre>\n
Username and Password<\/h3>\n
Typically, a username input field would only allow a certain length and a specific subset of characters.<\/p>\n
[Required]\r\n[RegularExpression(@\"^[\\w.\\-]{2,18}$\", ErrorMessage = \"Invalid username.\")]\r\npublic string Username { get; set; }<\/pre>\n
Here, we simplify the expression by using a new matcher \\w<\/code> that is equivalent to [a-zA-Z0-9_]<\/code>.<\/p>\n
Also, we use a quantifier to limit the length of the string to eight-teen characters. However, it is probably better to use the MaxLength<\/code> data annotation attribute for that.<\/p>\n
Passwords, on the other hand, usually require at least one occurrence of certain character types. We will require our new employee to provide a password that matches the following rules:<\/p>\n
    \n
  • At least one\n
      \n
    • number (0-9)<\/li>\n
    • uppercase letter<\/li>\n
    • lowercase letter<\/li>\n
    • non-alpha-numeric character<\/li>\n<\/ul>\n<\/li>\n
    • Password length is between 8 and 32 characters with no spaces<\/li>\n<\/ul>\n
      [Required]\r\n[RegularExpression(@\"^(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\\w\\d\\s:])([^\\s]){8,32}$\", \r\n                    ErrorMessage = \"Password doesn't meet security rules.\")]\r\npublic string Password { get; set; }<\/pre>\n
      Checking that there’s at least one occurrence of a certain type of character is the tricky part. However, we can achieve it using the positive lookahead assertion ?=<\/code>. It checks that a given pattern appears in a string without consuming string positions itself.<\/p>\n
      Email<\/h3>\n
      Validating email addresses can be rather complex. Anyway, we can go for something simple that does the job just fine:<\/p>\n
      [Required]\r\n[RegularExpression(@\"^((?!\\.)[\\w-_.]*[^.])(@\\w+)(\\.\\w+(\\.\\w+)?[^.\\W])$\", ErrorMessage = \"Invalid email address.\")]\r\npublic string Email { get; set; }<\/pre>\n
      Phone Number<\/h3>\n
      Finally, let’s validate our employee’s phone number. Phone numbers in the united states consist of ten digits and may be preceded by the country code +1<\/code>. Additionally, some people like to insert spaces to separate groups of digits +1 123 456 7890<\/code>:<\/p>\n
      [Required]\r\n[RegularExpression(@\"^([+]?\\d{1,2}[-\\s]?|)\\d{3}[-\\s]?\\d{3}[-\\s]?\\d{4}$\", ErrorMessage = \"Invalid phone number.\")]\r\npublic string PhoneNumber { get; set; }<\/pre>\n
      Conclusion<\/h2>\n
      In this article, we have learned what regular expressions are and why they are useful for user input validation.<\/p>\n
      We have learned how to integrate regular expressions in our Blazor WebAssembly application using data annotation attributes and, finally, we have implemented various complex validations in an example form.<\/p>\n","protected":false},"excerpt":{"rendered":"
      In this article, we are going to learn how to use regular expressions for user input validation in Blazor WebAssembly applications. Let’s get started. Regular Expressions Regular expressions (regex or regexp for short) are character sequences that we use to match patterns on strings. Every major programming language has a regex engine embedded in it […]<\/p>\n","protected":false},"author":6,"featured_media":62188,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[683,684],"tags":[685,686,727,1257,743],"class_list":["post-70366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blazor","category-blazor-webassembly","tag-blazor","tag-blazor-webassembly","tag-forms-validation","tag-regular-expressions","tag-validation","et-has-post-format-content","et_post_format-et-post-format-standard"],"yoast_head":"\nValidate User Input With Regular Expressions in Blazor WebAssembly<\/title>\n<meta name=\"description\" content=\"Validate User Input With Regular Expressions using regular expressions in combination with data annotations.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Validate User Input With Regular Expressions in Blazor WebAssembly\" \/>\n<meta property=\"og:description\" content=\"Validate User Input With Regular Expressions using regular expressions in combination with data annotations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Maze\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-23T06:00:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-23T06:17:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Code Maze\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/CodeMazeBlog\" \/>\n<meta name=\"twitter:site\" content=\"@CodeMazeBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Code Maze\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/\"},\"author\":{\"name\":\"Code Maze\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04\"},\"headline\":\"Validate User Input With Regular Expressions in Blazor WebAssembly\",\"datePublished\":\"2022-05-23T06:00:04+00:00\",\"dateModified\":\"2022-05-23T06:17:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/\"},\"wordCount\":1232,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"keywords\":[\"Blazor\",\"Blazor WebAssembly\",\"Forms Validation\",\"Regular Expressions\",\"validation\"],\"articleSection\":[\"Blazor\",\"Blazor WebAssembly\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/\",\"url\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/\",\"name\":\"Validate User Input With Regular Expressions in Blazor WebAssembly\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"datePublished\":\"2022-05-23T06:00:04+00:00\",\"dateModified\":\"2022-05-23T06:17:03+00:00\",\"description\":\"Validate User Input With Regular Expressions using regular expressions in combination with data annotations.\",\"breadcrumb\":{\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png\",\"width\":1100,\"height\":620,\"caption\":\"Blazor WebAssembly\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/code-maze.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Validate User Input With Regular Expressions in Blazor WebAssembly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/code-maze.com\/#website\",\"url\":\"https:\/\/code-maze.com\/\",\"name\":\"Code Maze\",\"description\":\"Learn. Code. Succeed.\",\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/code-maze.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/code-maze.com\/#organization\",\"name\":\"Code Maze\",\"url\":\"https:\/\/code-maze.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"width\":3511,\"height\":3510,\"caption\":\"Code Maze\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/CodeMazeBlog\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04\",\"name\":\"Code Maze\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png\",\"caption\":\"Code Maze\"},\"description\":\"This is the standard author on the site. Most articles are published by individual authors, with their profiles, but when several authors have contributed, we publish collectively as a part of this profile.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/codemaze\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog\"],\"url\":\"https:\/\/code-maze.com\/author\/codemazecontributor\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Validate User Input With Regular Expressions in Blazor WebAssembly","description":"Validate User Input With Regular Expressions using regular expressions in combination with data annotations.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/","og_locale":"en_US","og_type":"article","og_title":"Validate User Input With Regular Expressions in Blazor WebAssembly","og_description":"Validate User Input With Regular Expressions using regular expressions in combination with data annotations.","og_url":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/","og_site_name":"Code Maze","article_published_time":"2022-05-23T06:00:04+00:00","article_modified_time":"2022-05-23T06:17:03+00:00","og_image":[{"width":1100,"height":620,"url":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","type":"image\/png"}],"author":"Code Maze","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/CodeMazeBlog","twitter_site":"@CodeMazeBlog","twitter_misc":{"Written by":"Code Maze","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#article","isPartOf":{"@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/"},"author":{"name":"Code Maze","@id":"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04"},"headline":"Validate User Input With Regular Expressions in Blazor WebAssembly","datePublished":"2022-05-23T06:00:04+00:00","dateModified":"2022-05-23T06:17:03+00:00","mainEntityOfPage":{"@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/"},"wordCount":1232,"commentCount":0,"publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"image":{"@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","keywords":["Blazor","Blazor WebAssembly","Forms Validation","Regular Expressions","validation"],"articleSection":["Blazor","Blazor WebAssembly"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/","url":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/","name":"Validate User Input With Regular Expressions in Blazor WebAssembly","isPartOf":{"@id":"https:\/\/code-maze.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage"},"image":{"@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","datePublished":"2022-05-23T06:00:04+00:00","dateModified":"2022-05-23T06:17:03+00:00","description":"Validate User Input With Regular Expressions using regular expressions in combination with data annotations.","breadcrumb":{"@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#primaryimage","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-blazor-wasm.png","width":1100,"height":620,"caption":"Blazor WebAssembly"},{"@type":"BreadcrumbList","@id":"https:\/\/code-maze.com\/validate-input-regular-expressions-blazor-webassembly\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/code-maze.com\/"},{"@type":"ListItem","position":2,"name":"Validate User Input With Regular Expressions in Blazor WebAssembly"}]},{"@type":"WebSite","@id":"https:\/\/code-maze.com\/#website","url":"https:\/\/code-maze.com\/","name":"Code Maze","description":"Learn. Code. Succeed.","publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/code-maze.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/code-maze.com\/#organization","name":"Code Maze","url":"https:\/\/code-maze.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","width":3511,"height":3510,"caption":"Code Maze"},"image":{"@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/CodeMazeBlog"]},{"@type":"Person","@id":"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04","name":"Code Maze","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/person\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png","caption":"Code Maze"},"description":"This is the standard author on the site. Most articles are published by individual authors, with their profiles, but when several authors have contributed, we publish collectively as a part of this profile.","sameAs":["https:\/\/www.linkedin.com\/company\/codemaze\/","https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog"],"url":"https:\/\/code-maze.com\/author\/codemazecontributor\/"}]}},"_links":{"self":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/70366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/comments?post=70366"}],"version-history":[{"count":6,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/70366\/revisions"}],"predecessor-version":[{"id":70487,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/70366\/revisions\/70487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media\/62188"}],"wp:attachment":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media?parent=70366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/categories?post=70366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/tags?post=70366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}