支持ASP.NET MVC、WebFroM的表單驗(yàn)證框架ValidationSuar使用介紹
1、支持javascript端和后端的雙重驗(yàn)證 (前端目前依賴于jquery.validate.js,也可以自已擴(kuò)展)
2、代碼簡(jiǎn)潔
3、調(diào)用方便
4、功能齊全
使用方法:
新建初始化類,將所有需要驗(yàn)證的在該類進(jìn)行初始化,語(yǔ)法相當(dāng)簡(jiǎn)潔并且可以統(tǒng)一管理,寫完這個(gè)類你的驗(yàn)證就完成了70%
函數(shù)介紹:
Add 默認(rèn)類型(郵件、手機(jī)、qq等)
AddRegex 正則驗(yàn)證 在Add無法滿足情部下使用
addFunc 使用js函數(shù)進(jìn)行驗(yàn)證,一般用于業(yè)邏輯的驗(yàn)證 ,功能非常強(qiáng)大,可以滿足各種驗(yàn)證(注意:addFunc 函數(shù)驗(yàn)證后 后臺(tái)需要重新驗(yàn)證,所以能用上兩種方法驗(yàn)證的,盡量使用上面的)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using SyntacticSugar; namespace ValidationSuarMVC.Models { public class Validates { public static void Init() { //login ValidationSugar.Init(PageKeys.LOGIN_KEY, ValidationSugar.CreateOptionItem().Set("userName", true/*是否必填*/, "用戶名").AddRegex("[a-z,A-Z].*", "用戶名必須以字母開頭").AddRegex(".{5,15}", "長(zhǎng)度為5-15字符").AddFunc("checkUserName", "用戶名不存在,輸入 admin1 試試").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("password", true, "密碼").AddRegex("[0-9].*", "用戶名必須以數(shù)字開頭").AddRegex(".{5,15}", "長(zhǎng)度為5-15字符").ToOptionItem() ); //register ValidationSugar.Init(PageKeys.REGISTER_KEY, ValidationSugar.CreateOptionItem().Set("userName", true, "用戶名").AddRegex("[a-z,A-Z].*", "用戶名必須以字母開頭").AddRegex(".{5,15}", "長(zhǎng)度為5-15字符").AddFunc("checkUserName", "用戶名已存在!").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("password", true, "密碼").AddRegex(".{5,15}", "長(zhǎng)度為5-15字符").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("password2", true, "密碼").AddRegex(".{5,15}", "長(zhǎng)度為5-15字符").AddFunc("confirmPassword", "密碼不一致").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("sex", true, "性別").AddRegex("0|1", "值不正確").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("email", true, "郵箱").Add(ValidationSugar.OptionItemType.Mail, "郵箱格式不正確").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("mobile", false, "手機(jī)").Add(ValidationSugar.OptionItemType.Mobile, "手機(jī)格式不正確").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("qq", false, "qq").AddRegex(@"\d{4,15}", "qq號(hào)碼格式不正確").ToOptionItem(), ValidationSugar.CreateOptionItem().Set("education", true, "學(xué)歷", true/*checkbox 多選模式*/).AddRegex(@"\d{1,15}", "值不正確").ToOptionItem() ); } } }
Global.cs注冊(cè)我們就可以用了
驗(yàn)證大多情況下分兩種
1、submit提交的寫法
Register 一行代碼搞定、獲取綁定信息交給viewbag
PostRegister 也是一行完成后臺(tái)驗(yàn)證
view
1、引用js并寫好初始化函數(shù)
2、將@Html.Raw(ViewBag.validationBind) 放在頁(yè)面最下方
VIEW完整代碼:
@{ ViewBag.Title = "Register"; Layout = null; } <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="/Content/jquery-validation-1.13.1/lib/jquery-1.9.1.js" type="text/javascript"></script> <script src="/Content/jquery-validation-1.13.1/dist/jquery.validate.js" type="text/javascript"></script> <script src="/Content/validation.sugar.js" type="text/javascript"></script> <script src="/Content/jquery-validation-1.13.1/lib/jquery.form.js" type="text/javascript"></script> <link href="/Content/jquery-validation-1.13.1/validation.sugar.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { var factory = new validateFactory($("form"), "<img src=\"/Content/jquery-validation-1.13.1/error.png\" />"); factory.init(); }); //用戶名是否已存在 function checkUserName() { //實(shí)際開發(fā)換成: ajax async:false var userName = $("[name=userName]").val(); if (userName == "admin1" || userName == "admin2") { return false; } return true; } //驗(yàn)證密碼是否一致 function confirmPassword() { return $("[name=password]").val() == $("[name=password2]").val(); } </script> <style> td { height: 30px; padding: 5px; } </style> </head> <body> <h3> 基于jquery.validate的前后臺(tái)雙驗(yàn)證</h3> <form method="post" class="form" id="form1" action="/home/postRegister"> <table> <tr> <td> name </td> <td> <input type="text" name="userName"> </td> </tr> <tr> <td> password </td> <td> <input type="password" name="password" /> </td> </tr> <tr> <td> confirm password </td> <td> <input type="password" name="password2" /> </td> </tr> <tr> <td> sex </td> <td> <input type="radio" value="1" name="sex" /> 男 <input type="radio" value="0" name="sex" /> 女 </td> </tr> <tr> <td> email </td> <td> <input type="text" name="email" /> </td> </tr> <tr> <td> mobile </td> <td> <input type="text" name="mobile" /> </td> </tr> <tr> <td> qq </td> <td> <input type="text" name="qq" /> </td> </tr> <tr> <td> education </td> <td> <p> <input type="checkbox" value="1" name="education" /> 本科 <input type="checkbox" value="2" name="education" /> 幼兒園 <input type="checkbox" value="3" name="education" /> 小學(xué) </p> </td> </tr> </table> <button type="submit"> submit提交(禁掉瀏覽器JS進(jìn)行測(cè)試)</button> @Html.Raw(ViewBag.validationBind) </form> </body> </html>
就這么幾行代碼就完了一個(gè)注冊(cè)
效果如下:
對(duì)css支持還是不錯(cuò)的可以。自已美化
2、ajax寫法
把submit改成button,在寫個(gè)事件搞定
DEMO下載:
http://xiazai.jb51.net/201506/other/sunkaixuan-ValidationSuarMVC-master.zip
相關(guān)文章
DataGridView多維表頭的實(shí)現(xiàn)方法
不過我自己還是擴(kuò)展了DataGridView,使之能制作出多維表頭。2013-04-04asp.net后臺(tái)如何輸出js腳本使用什么方法可以實(shí)現(xiàn)
asp.net后臺(tái)如何輸出js腳本,用page.ClientScript.RegisterStartupScript方式實(shí)現(xiàn),實(shí)現(xiàn)示例如下,感興趣的朋友不要錯(cuò)過2014-01-01微軟官方SqlHelper類 數(shù)據(jù)庫(kù)輔助操作類
本文主要介紹微軟官方的數(shù)據(jù)庫(kù)操作類極其使用方法,幫助大家利用已經(jīng)非常成熟的類庫(kù)來進(jìn)行快速開發(fā)。2016-03-03ASP.NET自定義Web服務(wù)器控件之Button控件
這篇文章主要介紹了ASP.NET自定義Web服務(wù)器控件之Button控件,詳細(xì)講述了Button控件的實(shí)現(xiàn)代碼、前臺(tái)頁(yè)面的調(diào)用以及對(duì)應(yīng)的事件響應(yīng)代碼,具有很好的參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11ASP.NET數(shù)據(jù)綁定之DataList控件
這篇文章主要為大家介紹了ASP.NET數(shù)據(jù)綁定中的DataList控件,DataList控件以表的形式呈現(xiàn)數(shù)據(jù),通過該控件,您可以使用不同的布局來顯示數(shù)據(jù)記錄,對(duì)DataList控件感興趣的小伙伴們可以參考一下2016-01-01微信公眾平臺(tái)開發(fā)教程(八)Session處理問題
本篇文章主要介紹了微信公眾平臺(tái)開發(fā)教程(八)Session處理 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-12-12