表单验证

Posted 2020-08-21 YZ-M

验证

 attributes:

Attributes	Input 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-summary	Validation 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);