支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍
程序员文章站
2024-02-21 08:10:52
1、支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展)
2、代码简洁
3、调用方便
4、功能齐全
使...
1、支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展)
2、代码简洁
3、调用方便
4、功能齐全
使用方法:
新建初始化类,将所有需要验证的在该类进行初始化,语法相当简洁并且可以统一管理,写完这个类你的验证就完成了70%
函数介绍:
add 默认类型(邮件、手机、qq等)
addregex 正则验证 在add无法满足情部下使用
addfunc 使用js函数进行验证,一般用于业逻辑的验证 ,功能非常强大,可以满足各种验证(注意:addfunc 函数验证后 后台需要重新验证,所以能用上两种方法验证的,尽量使用上面的)
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}", "长度为5-15字符").addfunc("checkusername", "用户名不存在,输入 admin1 试试").tooptionitem(), validationsugar.createoptionitem().set("password", true, "密码").addregex("[0-9].*", "用户名必须以数字开头").addregex(".{5,15}", "长度为5-15字符").tooptionitem() ); //register validationsugar.init(pagekeys.register_key, validationsugar.createoptionitem().set("username", true, "用户名").addregex("[a-z,a-z].*", "用户名必须以字母开头").addregex(".{5,15}", "长度为5-15字符").addfunc("checkusername", "用户名已存在!").tooptionitem(), validationsugar.createoptionitem().set("password", true, "密码").addregex(".{5,15}", "长度为5-15字符").tooptionitem(), validationsugar.createoptionitem().set("password2", true, "密码").addregex(".{5,15}", "长度为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, "手机").add(validationsugar.optionitemtype.mobile, "手机格式不正确").tooptionitem(), validationsugar.createoptionitem().set("qq", false, "qq").addregex(@"\d{4,15}", "qq号码格式不正确").tooptionitem(), validationsugar.createoptionitem().set("education", true, "学历", true/*checkbox 多选模式*/).addregex(@"\d{1,15}", "值不正确").tooptionitem() ); } } }
global.cs注册我们就可以用了
验证大多情况下分两种
1、submit提交的写法
register 一行代码搞定、获取绑定信息交给viewbag
postregister 也是一行完成后台验证
view
1、引用js并写好初始化函数
2、将@html.raw(viewbag.validationbind) 放在页面最下方
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() { //实际开发换成: ajax async:false var username = $("[name=username]").val(); if (username == "admin1" || username == "admin2") { return false; } return true; } //验证密码是否一致 function confirmpassword() { return $("[name=password]").val() == $("[name=password2]").val(); } </script> <style> td { height: 30px; padding: 5px; } </style> </head> <body> <h3> 基于jquery.validate的前后台双验证</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" /> 小学 </p> </td> </tr> </table> <button type="submit"> submit提交(禁掉浏览器js进行测试)</button> @html.raw(viewbag.validationbind) </form> </body> </html>
就这么几行代码就完了一个注册
效果如下:
对css支持还是不错的可以。自已美化
2、ajax写法
把submit改成button,在写个事件搞定
demo下载:
http://xiazai.jb51.net/201506/other/sunkaixuan-validationsuarmvc-master.zip