MVC系列學習(十一)-客戶端的驗證

2019-11-17 02:05:33

字體：大中小

來源：轉載

供稿：網友

MVC系列學習(十一)-客戶端的驗證

1.通過一個實例，來了解MVC中強大的驗證功能

1.1新建一個【基本】的mvc項目，因為要用到驗證的js，然后在一個視圖中寫上一下代碼，以及Model中的代碼如下

【注】在調用html.EditFor()方法時，會根據實體中的相應屬性的DataType特性，來生成相應的標簽

【注】Html.ValidationMessageFor()為顯示錯誤信息；如果要將錯誤集中在一處，可以用Html.ValidationSummary()

1.2.開始測試

【附：DataType的其他枚舉】

1.3查看源代碼

<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>Add</title>    <script src="/Scripts/jquery-1.8.2.js"></script>    <script src="/Scripts/jquery.validate.js"></script>    <script src="/Scripts/jquery.validate.unobtrusive.js"></script></head><body><form action="/Home/Modify" method="post">       <table>           <tr>               <td>姓名</td>               <td><input data-val="true" data-val-length="字段 姓名  必須是最大長度為 3 的字符串。" data-val-length-max="3" id="SName" name="SName" type="text" value="" />               <span class="field-validation-valid" data-valmsg-for="SName" data-valmsg-replace="true"></span>               </td>           </tr>           <tr>               <td><label for="SAge">年齡</label></td>               <td><input class="text-box single-line" data-val="true" data-val-number="字段 年齡 必須是一個數字。" data-val-range="這個位置填>=1并且&lt;=99的值" data-val-range-max="99" data-val-range-min="1" id="SAge" name="SAge" type="text" value="" />               <span class="field-validation-valid" data-valmsg-for="SAge" data-valmsg-replace="true"></span>               </td>           </tr>           <tr>               <td></td>               <td><input type="submit" value="提交"/></td>           </tr>       </table></form><!-- Visual Studio Browser Link --><script type="application/json" id="__browserLink_initializationData">    {"appName":"Firefox","requestId":"da5289da760b44f8b8c56a9684e0a5bd"}</script><script type="text/javascript" src="http://localhost:6217/e3c73d9e3ac34dfa9df5109ec8422564/browserLink" async="async"></script><!-- End Browser Link --></body></html>

原來，這些文本框本身并沒有變，只是多了一些屬性，當引入驗證的js文件時，根據文本框上的屬性，添加相應的js操作。當發現條件不滿足時，就不會將表單提交到服務器，實際上是做了如下操作。給表單中的onsubmit屬性設置為返回值為false，這樣就不會提交表單了。