• (转载)ASP.NET MVC结合jQuery插件进行数据验证


    原文:http://www.lzby.net/boho/blog/?p=240

    jQuery Validation是 一个强大的数据验证插件,该插件支持“validation rule”即验证规则,规则将对表单内的输入控件进行控制或约束,譬如“本项必填”,“本项不能少于n个字符”,或者“这不是一个有效的email地址” 等等。这些规则大多数和asp.net本身的验证控件类似。遗憾的是asp.net本身的验证控件不能在MVC框架下工作,因为服务器端控件受页面的 ViewState限制,而MVC框架是没有ViewState特性的……

    一条规则有两种方式应用到输入框中:

    1,声明,在输入框中设置class属性。

    <input name=”email” id=”email” maxlength=”60″ class=”required email” type=”text”/>

    可以看到标记中的class属性被设为“required”和“email”,这表示该输入框是必填的和被约束为合法email字符串内容的的规则。这种多个规则用于一个区域的形式必须要由一个空格符分开。

    2,为规则指定脚本。

    <script type=”text/javascript”>
    $(document).ready(function(){
    $(”#form-sign-up”).validate( {
    rules: {
    email: {
    required: true,
    email: true
    },
    messages: {
    email: {
    required: “Please provide an email”,
    email: “Please provide a valid email”
    } });
    });
    </script>

    指定id为“form-sign-up”的表单容器里的id为“email”的输入框的规则,并且还设定了当验证用户输入失败时所显示的相应的提示 信息。这些提示信息可以在脚本中的“messages”部分里进行自定义设置。提示信息是可选项,jQuery Validation插件提供了一套预先定义的提示信息。如果想提高用户体验效果,建议设置更友好的提示信息。

    最后还有一种更有趣更重要的规则方式就是“remote”即“远程规则”,也可以称其为“服务器端验证”(上面的验证都是在客户浏览器端完成)。验 证处理在服务器端进行,常用于用户名是否存在之类验证,很重要。AJAX形式执行远程的验证处理,可以使用MVC的控制器方法。

    <script type=”text/javascript”>
    $(document).ready(function(){
    $(”#form-sign-up”).validate( {
    rules: {
    login: {
    required: true,
    remote: ‘<%=Url.Action(”IsLoginAvailable”, “Accounts”) %>’
    }
    },
    messages: {
    login: {
    required: “Please provide an alias”,
    remote: jQuery.format(”{0} is already in use”)
    }
    } });
    });
    </script>

    在服务器控制器端唯一的要求就是Json结果返回验证结果。在MVC框架中是很容易做到的:

    public JsonResult IsLoginAvailable(string login)
    {
    JsonResult result = new JsonResult();
    if (login == “boho”)
    result.Data = false;
    else
    result.Data = true;
    return result;
    }

    在上面的处理中,如果输入框输入的数据为”boho”,验证失败,并且用户会看到一条错误消息“boho is already in use”

    错误信息的样式:

    label.error {
    display: block;
    color: red;
    font-style: italic;
    font-weight: normal;
    }
    input.error {
    border: 2px solid red;
    }
    td.field input.error, td.field select.error, tr.errorRow td.field input,tr.errorRow td.field select {
    border: 2px solid red;
    background-color: #FFFFD5;
    margin: 0px;
    color: red;
    }

    在这可以下载示例代码

  • 相关阅读:
    小程序运行环境
    在虚拟机系统上安装oracle教程
    Java keywords
    Java bytecode instruction listings
    一个理解JVM的例子2
    一个理解JVM的例子
    JDK的环境变量设置
    JRE、JDK和JVM的关系
    合理的封装实例
    修改源码的几种取巧的方式
  • 原文地址:https://www.cnblogs.com/panzhilei/p/1318722.html
Copyright © 2020-2023  润新知