欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

支持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注册我们就可以用了

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

验证大多情况下分两种

1、submit提交的写法

register 一行代码搞定、获取绑定信息交给viewbag

postregister 也是一行完成后台验证

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

view

1、引用js并写好初始化函数

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

2、将@html.raw(viewbag.validationbind) 放在页面最下方

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

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>

就这么几行代码就完了一个注册

效果如下:  

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

对css支持还是不错的可以。自已美化

2、ajax写法

把submit改成button,在写个事件搞定

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

demo下载:

http://xiazai.jb51.net/201506/other/sunkaixuan-validationsuarmvc-master.zip