实现步骤
注意:js文件需要按照上面这个顺序导入
js文件查找
打开网址
cdnjs - The #1 free and open source CDN built to make life easier for developers
输入jquery,点击第一个搜索出来的jquery
这样第一个js文件就找到了,其它两个搜索关键词改成jquery validation/jquery validation uno即可搜索到。
更新Create.cshtml
将三个js文件添加到Create.cshtml尾部
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js" integrity="sha512-WMEKGZ7L5LWgaPeJtw9MBM4i5w5OSBlSjTjCtSnvFJGSVD26gE5+Td12qN5pvWXhuWaWcVwF++F7aqu9cvqP0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/4.0.0/jquery.validate.unobtrusive.min.js" integrity="sha512-xq+Vm8jC94ynOikewaQXMEkJIOBp7iArs3IhFWSWdRT3Pq8wFz46p+ZDFAR7kHnSFf+zUv52B3prRYnbDRdgog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
此时打开浏览器,点击Create,已经不再有Post请求,说明是浏览器端验证了字段,但是没有提示信息,接下来补充验证信息。
PersonName为例
@*PersonName*@
<div class="form-field flex">
<div class="w-25">
@* <label for="PersonName" class="form-label pt">Person Name</label> *@
<label asp-for="PersonName" class="form-label pt">Person Name</label>
</div>
<div class="flex-1">
@* <input type="text" id="PersonName" name="PersonName" class="form-input" /> *@
<input asp-for="PersonName" class="form-input" />
<span asp-validation-for="PersonName" class="text-red"></span>
</div>
</div>
添加验证总结
<button class="button button-green-back">Create</button>
<div asp-validation-summary="All" class="text-red"></div>
推荐使用验证总结,一目了然,不用一个个去看。
Gitee获取源码: