客户端验证：validation

validation客户端验证的问题

在struts 的验证里，要注意如下几点

<html:form action="/ createUser" οnsubmit=“return validateUserForm(this);”>
格式为 return validate + formbean名称(首字母大写) + (this)用来在提交本页面时执行相应的js验证代码。

② 用来生成本页面的 js 验证代码。 有两种方法：

⑴ 在页面上声明
<%@ taglib uri=“http://struts.apache.org/tags-html” prefix=“html” %>
<html:javascript formName=“userForm” dynamicJavascript=“true” staticJavascript=“true”/>
因为dynamicJavascript/staticJavascript在JavascriptValidatorTag.java中默认为true，所以上面也可以直接写：<html:javascript formName=“userForm”/>

注：在客户端执行的js验证如果不通过，会alert出对话框进行提示，服务器端的验证(在页面上可以用html:errors/来显示出错信息)就不会执行。
注意只有dynamicJavascript=“true” + staticJavascript=“true” 才能生成完整的 js 验证代码 ，如果把任何一个设为"false"提交页面时都会产生js错误，除非我们采用下面⑵的方法进行声明。

⑵ 在本页面上声明
<%@ taglib uri=“http://struts.apache.org/tags-html” prefix=“html” %>
<html:javascript formName=“userForm” dynamicJavascript=“true” staticJavascript=“false”/

定义staticJavascript.jsp的内容为
<%@ taglib uri=“http://struts.apache.org/tags-html” prefix=“html” %>
<html:javascript dynamicJavascript=“false” staticJavascript=“true”/>
注：dynamicJavascript 表示是否在页面内生成动态的js，staticJavascript属性代表是否在页面内生成静态js。 如staticJavascript设为"true"，则validator-rules.xml文件中的规则检查生成的js代码都会生成到本页面内。这样本页面会越来越大，一般最好是将staticJavascript设为"false"， 将validator-rules.xml生成的js代码填充到一个指定的jsp页面(staticJavascript.jsp)中去。
Struts2.1.8 在做客户端验证时，当form中给定 validation=“true”时，通过jsp页面访问会报一下异常：`

Method public java.util.List org.apache.struts2.components.Form.getValidators(java.lang.String) threw an exception when invoked on org.apache.struts2.components.Form@18faef1 - Class: freemarker.ext.beans.SimpleMethodModel
File: SimpleMethodModel.java
Method: exec
Line: 130 - freemarker/ext/beans/SimpleMethodModel.java:130:-1
org.apache.struts2.components.UIBean.end(UIBean.java:515)
org.apache.struts2.views.jsp.ComponentTagSupport.doEndTag(ComponentTagSupport.java:42)
org.apache.jsp.index_jsp._jspx_meth_s_005fform_005f0(index_jsp.java:143)
org.apache.jsp.index_jsp._jspService(index_jsp.java:80)
org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
javax.servlet.http.HttpServlet.service(HttpServlet.java:803)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:393)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:320)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:266)

解决的办法就是

不要直接访问你的JSP页面，为应用中所有页面都配置一个通用Action，例如:

<action name="*">
    <result>{1}.jsp</result>
</action>

比如你要访问abc.jsp页面，你应该访问abc.action，或者省略.action后缀，直接访问abc也可以。
但不要直接访问abc.jsp

MVC客户端验证
客户端验证的好处是不用向服务器提交代码就能显示出错误信息。反应更快，与用户交互更流畅。
然而，其致命的弱点就是验证脚本可以在客户端被随意修改。因此它是不可靠的。
所以我们这里介绍怎样给单纯的服务器端验证加上客户端验证。
那么我们就基于上一节讲的Data Annotation验证添加客户端验证。
首先，确认解决方案根目录下的web.config文件中激活了客户端验证：
隐藏代码：

<configuration>
  <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
</configuration>

第3行表示激活了客户端验证。第4行表示激活Unobstrusive JavaScript。它代表着一种将Html代码和JavasScript分离开的思想。总体来说就是用代码分离的思想做客户端验证。
然后继续使用上一节创建的Model和Controller。
Models/DataAnnotationModel.cs
隐藏代码

using System.ComponentModel.DataAnnotations;
namespace SlarkInc.Models
{
    public class DataAnnotationModel
    {
        [Required(ErrorMessage = "Name is required")]
        public string Name { get; set; }
 
        [Required(ErrorMessage = "Email is required")]
        [RegularExpression(@"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$", ErrorMessage = "Email is invalid")]
        public string Email { get; set; }
    }
}

Controllers/DataValidationController.cs
隐藏代码

using System.Web.Mvc;
using SlarkInc.Models;
using System.Text.RegularExpressions;
 
namespace SlarkInc.Controllers
{
    public class DataValidationController : Controller
    {
        public ActionResult DataAnnotationAction()
        {
            return View();
        }
 
        [HttpPost]
        public ActionResult DataAnnotationAction(DataAnnotationModel model)
        {
            if (ModelState.IsValid)
            {
                ViewBag.Name = model.Name;
                ViewBag.Email = model.Email;
            }
            return View(model);
        }
    }
}

View代码继续沿用，不过需要添加客户端验证所需的js文件。
Views/DataValidation/DataAnnotationAction.cshtml
隐藏代码

@model SlarkInc.Models.DataAnnotationModel
@{
    ViewBag.Title = "DataAnnotationAction";
}
<h2>Data Annotation Validation</h2>
@Html.ValidationSummary()
@using (Html.BeginForm())
{
    if (@ViewData.ModelState.IsValid && ViewBag.Name != null)
    {
        <b>
            Name : @ViewBag.Name
            <br />
            Email: @ViewBag.Email
        </b>
    }
    <fieldset>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <br />
        <input type="submit" value="Submit" />
    </fieldset>
}
@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

这一段代码会调用App_Start文件夹下的BundleConfig.cs文件。文件内容如下：

namespace SlarkInc
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
 
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));
 
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
 
            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));
 
            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

可以看到验证所需的信息都在html代码里，而验证的函数逻辑都在引入的validate的js文件里。两部分完全分离，但是又配合得很好。

到此，我们的客户端验证就介绍完了。