MVC遇上bootstrap后的ajax表单验证

使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jquery.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点。怎么解决呢?

当然你可以专门写一个针对此的jquery插件,我觉得蛮麻烦的,喜欢写插件的研究下吧。

首先Nuget获取一个 MVC EditorTemplates for Bootstrap 3 的组件,有了他以后就有了一些模版,比如比较简单的一个Text:

@model object
<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
  @Html.LabelFor(m => m, new { @class = "control-label" })
  <div class="controls">
    @Html.TextBox(
      "",
      ViewData.TemplateInfo.FormattedModelValue,
      ViewBag.ClearTextField == true ? new { @class = "form-control clear-text-field input-block-level" } : new { @class = "form-control input-block-level" } )
    @Html.ValidationMessageFor(m => m, null, new { @class = "help-block" })
  </div>
</div>

这样子以后在使用EditorFor后就会直接输出bootstrap需要的html,比较方便。

我们看到里面已经有了验证失败的has-error的处理,第二个问题来了,我们需要前端验证,ajax验证也行啊,还有自定义验证呢?

于是乎继续利用MVC自带的模型验证,刚才获取的组件中有个Validation类,我们先在里面添加一个扩展方法用于非强类型

    public static MvcHtmlString ValidationError(this HtmlHelper htmlHelper, string field, string error)
    {
      if (HasError(htmlHelper, ModelMetadata.FromStringExpression(field, htmlHelper.ViewData), field))
        return new MvcHtmlString(error);
      else
        return null;
    }

View中即可添加:

    <div class="form-group@(Html.ValidationError("Department", " has-error"))">
      <label class="control-label" for="DepartmentId">所在部门</label>
      <div class="controls">
        <span id="deptname"> </span><a id="btnSelectDepartment">选择部门</a>
        <input class="form-control" data-val="true" data-val-required="部门是必需的。" id="DepartmentId" name="DepartmentId" type="hidden" value="">
        @Html.ValidationMessage("Department", null, new { @class = "help-block" })
      </div>
    </div>

最后在脚本中处理ajax提交和回发的处理,不知道用MVC的Ajax.BeginForm能不能更方便点,不过个人觉得这东西不是很灵活,所以继续用ajaxSubmit及jquery.ajax:

//ready
      var $divuserform = $("#divuserform");
      $divuserform.dialog({
        title: '新建用户',//.....
      });
      $("#btnCreateUser").click(function () {
        var nodes = zTreeObjleft.getSelectedNodes();
        if (nodes.length > 0) {
          CreateUserForm($divuserform);
        }
      })

function CreateUserForm(form) {
      var $divuserform = form;
      $.ajax({
        url: "CreateUser",
        success: function (html) {
          CreateUserFormSuccessCallback(html, $divuserform);
        }
      });
    }

    function InitSelectDepartmentWhenCreateUser() {
      $("#btnSelectDepartment").departmentSelection({
        onSelected: function (name, id) {
          $("#deptname").text(name);
          $("#DepartmentId").val(id);
        }
      });
    }

    function CreateUserFormSuccessCallback(html, form) {
      var $divuserform = form;
      $divuserform.children().children().html(html);
      $("#divuserform").dialog("open");
      var $form = $divuserform.find("form")
      InitSelectDepartmentWhenCreateUser();
      $form.submit(function () {
        $form.ajaxSubmit(function (data) {
          if (data == "success") {
            $("#divuserform").dialog("close");
            $("#divuserform").clearForm();
          }
          else {
            CreateUserFormSuccessCallback(data, form);
          }
        });
        event.preventDefault();
      });
    }

后台Action方法中我们便可为其补充自定义验证:

      if (!DepartmentId.HasValue)
      {
        ModelState.AddModelError("Department", "必须选择部门");
      }

      if (ModelState.IsValid)
      {
        user.Id = Guid.NewGuid();
        user.CreateTime = DateTime.Now;
        if (DepartmentId.HasValue)
        {
          var dept = new DeptUserRole();
          dept.DepartmentId = DepartmentId.Value;
          dept.IsMain = true;
          dept.RoleId = RoleId.Value;
          user.DeptUserRoles.Add(dept);
        }
        db.Users.Add(user);
        await db.SaveChangesAsync();
        return Content("success");
      }

      return View(user);

大致效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-11-05

Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)

本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

自己编写的支持Ajax验证的JS表单验证插件

自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1.点击提交按钮时显式调用验

Ajax注册用户时实现表单验证

很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用户名和电子邮件地址:一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而一些网站会做实时的用户名和电子邮件地址可用性检查,例如:"用户名"文本框失去焦点时:就用户体验来说,实时的用户信息检查用户体验效果更好,而不是在表单提交后,告诉用户信息不符合系统要求. 下面截图是新浪微博的注册界面,它采用的是实时的用户信息检查,如:手机号码和用户名等信息. 图1新浪微博注册

ajax jquery 异步表单验证示例代码

文件目录:  html代码: 复制代码 代码如下: <html> <head> <title>异步表单验证</title> <script type='text/javascript' src='jquery.js' ></script> <script> function checkname(){ //$("input[name='name']").val() $.ajax({ type:"

JS组件Form表单验证神器BootstrapValidator

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

基于Bootstrap+jQuery.validate实现表单验证

这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的

Bootstrap Validator 表单验证

在线演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html 使用方法,代码如下所示: 1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 2. <div class="form-group&qu

基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

实用又漂亮的BootstrapValidator表单验证插件

本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快 为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址 二.资源引用 下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"

基于PHP+Ajax实现表单验证的详解

一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件.使用方法和onclick事件类似.onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发.两种常用调用方法:(1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数.这种方法最简单,最直接,格式如下: 复制代码 代码如下: <script type="text

Angular4表单验证代码详解

 背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe

Angular表单验证实例详解

表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht

Spring Boot 2 Thymeleaf服务器端表单验证实现详解

这篇文章主要介绍了Spring Boot 2 Thymeleaf服务器端表单验证实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 表单验证分为前端验证和服务器端验证. 服务器端验证方面,Java提供了主要用于数据验证的JSR 303规范,而Hibernate Validator实现了JSR 303规范. 项目依赖加入spring-boot-starter-thymeleaf时,默认就会加入Hibernate Validator的依赖. 开

SpringMVC实现表单验证功能详解

本章节内容很丰富,主要有基本的表单操作,数据的格式化,数据的校验,以及提示信息的国际化等实用技能. 首先看效果图 项目结构图 接下来用代码重点学习SpringMVC的表单操作,数据格式化,数据校验以及错误提示信息国际化.请读者将重点放在UserController.java,User.java,input.jsp三个文件中. maven 项目必不可少的pom.xml文件.里面有该功能需要的所有jar包. <?xml version="1.0" encoding="UTF

正则表达式基本语法及表单验证操作详解【基于JS】

本文实例讲述了正则表达式基本语法及表单验证操作.分享给大家供大家参考,具体如下: 正则表达式是一种可以用于模式匹配和替换的强有力的工具,是数据的有效性验证. 一.基本语法 位于"/"定界符之间的部分就是将要在目标对象中进行匹配的模式.用户只要把希望查找匹配对象的模式内容放入"/"定界符之间即可.为了能够使用户更加灵活的定制模式内容,正则表达式提供了专门的"元字符".所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(

ASP.NET表单验证方法详解第1/2页

1.使用验证控件 这属于客户端验证,微软开发人员将最常用的验证功能进行了封装,使得我们开发效率明显提高,而且特别是自定义验证控件,非常灵活,我们可以自行设计验证逻辑.但是验证控件收到了浏览器的限制,记得在一次开发过程中,使用FireFox浏览器进行浏览,发现所有的验证控件失灵,这个并非是ASP.NET设计的漏洞,只能说浏览器标准的不唯一造成的. ASP.NET公有六种验证控件,分别如下: RequiredFieldValidator(必须字段验证) 用于检查是否有输入值 CompareValid

CI框架表单验证实例详解

本文实例讲述了CI框架表单验证的方法.分享给大家供大家参考,具体如下: 1.form头部信息的自动输出函数(view) <?php $attributes = array('class' => 'email', 'id' => 'myform'); echo form_open('email/send', $attributes); //上面一行代码输出: //<form method="post" accept-charset="utf-8"

JQurey Validation表单验证使用详解

是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.本文就是通过讲解这个实例来理解Validation的应用. 本实例涉及到的验证有: 用户名:长度.字符验证,重复性ajax验证(是否已存在). 密码:长度验证,重复输入密码验证. 邮件:邮件地址验证. 固定电话:中国大陆固定电话号码验证. 手机号:中国大陆手机号码验证. 网址:网站URL地址验证. 日期:标准日期格式验证. 数字:整数.正整数验证,数字范围验证. 身份证:大陆身份证号码验证. 邮政编码:

AngularJs表单验证实例详解

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="