表单验证

Posted YZ-M

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单验证相关的知识,希望对你有一定的参考价值。

验证

 attributes:

AttributesInput Type
[EmailAddress] type=”email”
[Url] type=”url”
[HiddenInput] type=”hidden”
[Phone] type=”tel”
[DataType(DataType.Password)] type=”password”
[DataType(DataType.Date)] type=”date”
[DataType(DataType.Time)] type=”time”

许多有用的验证属性都必须引用命名空间: System.ComponentModel.DataAnnotations

IsValid

  • [Compare]
    验证两个字段是否在model中匹配
  • [EmailAddress]
    验证该字段是否为邮箱格式
  •  [Phone]
    验证该字段是否为手机号码格式
  • [Range()]
    验证该字段的值是都在这个范围之内
  • [RegularExpression]
    验证该字段数据是否与指定的正则表达式相匹配
  • [Required]
    该字段为必填
  • [StringLength(60,MinimumLength=3)]
     验证该字段的字符串最大长度为多少,MinimumLength设置最小长度
  • [Url]
    验证该字段是否为url格式 
  • [ApplyFormatInEditMode]
    设置指定当值显示在文本框中进行编辑时,也应应用格式化?

The Validation Message Tag Helper

<span asp-validation-for="Email"></span>
html5:
<span class="field-validation-error" data-valmsg-for="Email"
            data-valmsg-replace="true">
   The Email Address field is required.
</span>

通过这个标签,当用户填写的Email的验证没有通过之后,显示默认错误提示。

The Validation Summary Tag Helper

  • 使用asp-validation-summary属性的<div>标签

  • HTML替代: @Html.ValidationSummary

 

asp-validation-summaryValidation messages displayed
(ValidationSummary).All Property and model level
(ValidationSummary).ModelOnly Model
(ValidationSummary).None None

 

<div asp-validation-summary="ModelOnly"></div>

非model类里边的验证错误消息提示

 ModelState.AddModelError("TelephoneNumber", "请提供有效的手机号码");

表单验证错误输入框变颜色

.input-validation-error{
border: 1px solid #FF5252;
}

验证错误后输入正确的信息,错误消息不会消失问题

引入jquery验证js就可以解决:

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

@section Scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

全局错误显示

@Html.ValidationSummary(true)

ModelState.AddModelError(string.Empty, error.Description);

 

以上是关于表单验证的主要内容,如果未能解决你的问题,请参考以下文章

原生JavaScript判断是否为邮箱危险字符验证长度验证网址验证小数整数浮点数等常用的验证

ajaxFileUpload上传带参数文件及JS验证文件大小

AngularJS

JS表单验证代码

课题实践总结

SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded;charset=UTF-8‘ not supported“(代码片段