验证提交数据的正确性分为客户端(依靠浏览器)和服务端两种方式,其中客户端主要是靠html+js来判断,本文章用的是默认的bootstrap前端框架,自带jquery库。话不多说,上代码:
1、新建一个.net core项目(完整mvc)
2、在model里新建一个userinfo.cs的类,用来作为客户端数据判断
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace WebApplication25.Models
{
public class UserInfo
{
[Required(ErrorMessage ="数据不能为空")]
[StringLength (10,ErrorMessage ="数据长度超出")]
public string userName { get; set; }
[Required(ErrorMessage = "数据不能为空")]
[StringLength(10, ErrorMessage = "数据长度超出")]
public string passWord { get; set; }
}
}
3、客户端验证的结果输出给视图,用控制器里的index建立的默认index页面视图
@*命名强类型视图*@
@model UserInfo
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
//这三个js包一定要加进去,不然看不到效果
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
</head>
<body>
<form action="test/postData" method="post">
<table>
<tr>
<td>用户名:</td>
<td>
//mvc下的<input>,效果一样的
@Html.TextBoxFor(m => m.userName)
@*客户端验证*@
@Html.ValidationMessageFor(m => m.userName)//这里就是错误信息
</td>
</tr>
<tr>
<td>密码:</td>
<td>
@Html.PasswordFor(m => m.passWord)
@*客户端验证*@
@Html.ValidationMessageFor(m => m.passWord) //这里就是错误信息
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
达到的效果如图:
服务端验证就比较简单了,只要不是由客户端成功提交过来的内容就不接受,写在控制器的接收方法里面,因为没有用到数据库,所以比较简单就不上图了。
public IActionResult postData( UserInfo ufo)//用服务端判断数据
{
if (ModelState.IsValid)
{
return Content("数据有效");
}
else
{
return Content("数据无效");
}