最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍

来源:懂视网 责编:小采 时间:2020-11-27 22:38:30
文档

支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍

支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍:1、支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展) 2、代码简洁 3、调用方便 4、功能齐全 使用方法: 新建初始化类,将所有需要验证的在该类进行初始化,语法相当简洁并且可以统一管理,写完这个类你的验证就完成了7
推荐度:
导读支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍:1、支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展) 2、代码简洁 3、调用方便 4、功能齐全 使用方法: 新建初始化类,将所有需要验证的在该类进行初始化,语法相当简洁并且可以统一管理,写完这个类你的验证就完成了7

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="https://www.gxlcms.com/Content/jquery-validation-1.13.1/lib/jquery-1.9.1.js" type="text/javascript"></script>
 <script src="https://www.gxlcms.com/Content/jquery-validation-1.13.1/dist/jquery.validate.js" type="text/javascript"></script>
 <script src="https://www.gxlcms.com/Content/validation.sugar.js" type="text/javascript"></script>
 <script src="https://www.gxlcms.com/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

文档

支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍

支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍:1、支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展) 2、代码简洁 3、调用方便 4、功能齐全 使用方法: 新建初始化类,将所有需要验证的在该类进行初始化,语法相当简洁并且可以统一管理,写完这个类你的验证就完成了7
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top