175 Client Side Validations

实现步骤

注意：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获取源码：

https://gitee.com/huang_jianhua0101/asp.-net-core-8.git