MarK’s Blog

Rules for happiness: something to do, someone to love, something to hope for.

SpringMVC-FormValidation

| Comments

拖了快两周的工程也算终于继续开工了，up主在12天的时间内从零学习了swift语言，然后写了一个丑到爆的APP出来，也算可以应付过关了。

今天要记录的内容是JavaEE中SpringMVC框架下的——表单验证，一款优秀的框架可以为你省去好多的麻烦。然而一个Web Application中或多或少都会涉及到表单验证。当我们选择了一个方便容易上手的框架，将会大大的提高我们的开发效率。

真不怪UP的拖延症，可是还是又鸽了好久。。。。。。。。我们回到正题：

现在大多数的B/S架构的Web应用采用的都应该是前端加后台双重验证的方式，何为前端验证，何为后台验证？

前端的表单验证，指的是当用户通过HTML的表单输入相应的信息之后，我们通过javascript代码在Browser处完成验证，也是就是说当数据还没有从表现层传到业务逻辑层的时候我们就先对数据的格式、内容进行验证，如果不符合规则，我们就不会将数据信息继续的传向下一层。

后端的验证，指的就是在业务逻辑层，通过Hibernate或其他的持久化的工具来再做一次验证，当我们业务逻辑层收到了前面传过来的数据，准备通过持久化工具将数据存入到数据库时，我们可以通过持久化工具提供的验证规则，再次的对数据的格式与内容进行验证，如果不符合规则，该事务对应的所有操作都将被回滚。

举个例子，我们通过水管向水箱中注水，但担心水中存在污染物质，所以我们在水管的出水口处进行一次过滤工作，我们为了确保没有问题，我们又在水箱的入口处进行一次过滤工作，通过双重过滤的方式来保证水质的纯净；这就和我们前端与后台的验证很类似了。

这次我们主要来记录一下前端的验证，前端的验证你可以通过自己编写javascript代码来验证每一个元素组件输入的正确性。但我们更喜欢站在别人的肩膀上高效的工作，我们利用一款javascript表单验证的框架——validate.js

了解过PHP语言的人，应该知道PHP中有一款非常基本，轻量级，很容易上手的框架——CodeIgniter，CI框架中就包含了一套非常全面的表单验证功能，其中有定义好的，也支持自定义的。

validate.js的作者也正是借鉴了CI框架中的表单验证的方式，创作一套基于javascript的前端表单验证框架，传送门：（请使劲用力大力的戳）：http://rickharrison.github.io/validate.js/

目录

一、下载validate.js

二、

一、下载validate.js

首先我们要在刚才的网站上下载我们所需的validate.js

二、加载validate.js

validate.js是一个非常轻量级的javascript的表单难框架，它只有2.1KB，而且它还不依赖于任何的其他的javascript框架，在你的html(或jsp）文件中直接导入即可。如：

1

<script type="text/javascript" src="validate.js"></script>

如果你使用了在我之前的文章中介绍的springMVC框架，请参照你web.xml中设置的springMVC的拦截路径，如果是”/“的情况下，通过相对路径是不可以正确的引用javascript文件的（css文件也是不可以的），因为所有的”/“请求都被拦截器拦截用来判断action请求的路径。解决方法有很多种，这里我们只提及一种springMVC框架比较推荐的一种，设置静态的访问路径。在springMVC的配置文件spring-dispatcher-servlet.xml中，我们可以通过如下的方式，

1

<mvc:resources mapping="/js/**" location="/js/"/>

设置静态的mapping的方式，设置完成之后所有的以js开头的请求，springMVC框架会mapping到你项目的部署文件夹（一般是webapp）的路径一下的js目录下的对应文件，这样说有点乱，我们看个例子，

1

<script type="text/javascript" src="<c:url value="js/validate.min.js"/>"></script>

这里我们使用了c:url标签辅助我们生成路径信息，在这个例子中，我们的请求是js/validate.min.js文件，但由于我们之前设置了静态访问请求路径，那么springMVC框架会帮助我们将/js/validate.min.js文件mapping至项目部署路径下的/js/validate.min.js文件。

三、使用validate.js作表单验证

如果你英文基础比较好的话，或者你对javascript足够了解的话，可以直接的猛戳 http://rickharrison.github.io/validate.js/，因为它本身就是一个非常详细的教程。

那么我们就开始我们的demo吧，

首先我们先创建一个jsp文件，其中有一个form表单，是我们需要对其的输入格式进行验证的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--use standard taglib c --%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
  <title>Hello, Fowafolo</title>
</head>
<%--import validate.js we used for form validation--%>
<script type="text/javascript" src="<c:url value="js/validate.min.js"/>"></script>
<body>

<h1 style="color: lime">Hello, Fowafolo</h1>
<h2 style="color: red">Fowafolo is really big fool !</h2>
<h2 style="color: yellow">Fowafolo is really big fool !</h2>
<h2 style="color: dodgerblue">Fowafolo is really big fool !</h2>
<h2 style="color: greenyellow">Fowafolo is really big fool !</h2>
<h2 style="color: darkorange">Fowafolo is really big fool !</h2>
<h2 style="color: mediumpurple">Fowafolo is really big fool !</h2>

<form id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p id="errorMsg" name="errorMsg"></p>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" type="text">
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" name="email">
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
</body>
</html>

这是一个我们平时经常见到的form表单，并没有什么不同的，只是有两个地方需要注意一下，首先就是我们为我们的form表单起了一个名字，让它有一个唯一的标识叫,commentForm，然后form表单中有一个<p>标签，叫做errorMsg，是用来显示表单验证的错误信息的。

然后我们在</body>之前添加我们的javascript验证代码，你可以写在任何的地方，只要包含在<script></script>中。我们希望通过javascript验证，如果正确则正常的提交表单，如果错误，则将出错的信息显示到errorMsg中。

我们先看一下全部的代码，然后在一一的解释，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script>
  var validator = new FormValidator('commentForm', [{
    name: 'name',
    display: 'UserName',
    rules: 'required'
  }, {
    name: 'email',
    display: 'Email',
    rules: 'valid_email|required'
  }], function(errors, event) {
    if (errors.length > 0) {
      var errorString = '';

      for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
        errorString += errors[i].message + '<br />';
      }

      errorMsg.innerHTML = errorString;
    }
  });
</script>

new FormValidator(formName, fields, callback)

然而小朋友并不想用这个框架，所以

完

–

Comments

返回顶部