生活随笔
收集整理的這篇文章主要介紹了
MVC jQuery表单验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery表單驗證
- 前言:
數據驗證分為客戶端驗證和服務端驗證，或兩種方式相結合。在客戶端驗證會減少服務器端的工作量。 - 作用：
從數據驗證的作用角度來說，數據驗證起到很重要的作用，如防止漏洞注入，防止網絡攻擊，確保數據安全，確保數據合理性，防止垃圾數據等作用 - 分類：
從數據驗證的種類來說，一般分為第三方驗證，比如我們用jQuery寫好驗證插件，在客戶端用ajax驗證和基于點內的mvc框架的數據驗證
jQuery，
客戶端腳本驗證技術（在用戶電腦上完成）
表單驗證，大致可以分為以下五種類型：
必填檢查（非空）
范圍檢查（符合某個范圍）
比較驗證（再次輸入密碼）
格式驗證（郵箱，日期）
特殊驗證（開發實際需求）
舉例，注冊賬戶的新密碼表單驗證：
方法1，手寫前端html代碼：
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>function checkform() {if (checkpwd1() && checkpwd2() && checkuser()) {$("#ErrorMsd").html("886");return true;}else {$("#ErrorMsd").html("請完善信息");return false;}}function checkuser() {if ($("#uname").val() == "") {$("#ErrorMsg").html("用戶名不能為空！");$("#uname").focus();return false;}else {$("#ErrorMsd").html("ok");return true;}}function checkpwd1() {if ($("#pwd1").val() == "") {$("#ErrorMsg1").html("不能為空！");$("#pwd1").focus();return false;}else {$("#ErrorMsd1").html("ok");return true;}}function checkpwd2() {if ($("#pwd2").val() == "") {$("#ErrorMsg2").html("不能為空！");$("#pwd2").focus();return false;}else {$("#ErrorMsd2").html("ok");return true;}}
</script><html>
<head><title></title>
</head>
<body>@using (Html.BeginForm("index", "home", FormMethod.Post)){
<table><tr><td>用戶名：
</td><td>@Html.TextBox("uname","",new { onblur = "checkuser()"})
</td><td><span id="ErrorMsg" style="color:deeppink"></span></td></tr><tr><td>Newpwd：
</td><td>@Html.TextBox("pwd1", "", new { onblur = "checkpwd1()" })
</td><td><span id="ErrorMsg1" style="color:deeppink"></span></td></tr><tr><td>Confirm pwd：
</td><td>@Html.TextBox("pwd2", "", new { onblur = "checkpwd2()" })
</td><td><span id="ErrorMsg2" style="color:deeppink"></span></td></tr></table><input type="submit" value="提交" class="btn btn-primary" onclick="checkform()"/>}
</body>
</html>
方法2，使用jQuery的Validate插件
1.引入插件
2.前端Html代碼：
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.metadata.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>$(function () {$("表單ID").validate({rules: {uname: { required: true },upwd1: { required: true },upwd2: { required: true, equalTo:"#upwd1" }}, messages: {uname: { required: "請輸入用戶名！" },upwd1: { required: "請輸入密碼" },upwd2: {required: "確認密碼：",equalTo: "#不一致！"}}})})
</script>
總結
以上是生活随笔為你收集整理的MVC jQuery表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
