ASP.NET MVC结合jQuery插件进行数据验证

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

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

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

PLAIN TEXT

HTML:

1. <input name="email" id="email" maxlength="60" class="required email" type="text"/>

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

   2，为规则指定脚本。

   PLAIN TEXT
   JavaScript:

   1. <script type="text/javascript">
   2. $(document).ready(function(){
   3. $("#form-sign-up").validate( {
   4. rules: {
   5. email: {
   6. required: true,
   7. email: true
   8. },
   9. messages: {
   10. email: {
   11. required: "Please provide an email",
   12. email: "Please provide a valid email"
   13. } });
   14. });
   15. </script>

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

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

   PLAIN TEXT
   JavaScript:

   1. <script type="text/javascript">
   2. $(document).ready(function(){
   3. $("#form-sign-up").validate( {
   4. rules: {
   5. login: {
   6. required: true,
   7. remote: '<%=Url.Action("IsLoginAvailable", "Accounts") %>'
   8. }
   9. },
   10. messages: {
   11. login: {
   12. required: "Please provide an alias",
   13. remote: jQuery.format("{0} is already in use")
   14. }
   15. } });
   16. });
   17. </script>

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

   PLAIN TEXT
   C#:

   1. public JsonResult IsLoginAvailable(string login)
   2. {
   3. JsonResult result = new JsonResult();
   4. if (login == "boho")
   5. result.Data = false;
   6. else
   7. result.Data = true;
   8. return result;
   9. }

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

   错误信息的样式：

   PLAIN TEXT
   CSS:

   1. label.error {
   2. display: block;
   3. color: red;
   4. font-style: italic;
   5. font-weight: normal;
   6. }
   7. input.error {
   8. border: 2px solid red;
   9. }
   10. td.field input.error, td.field select.error, tr.errorRow td.field input,tr.errorRow td.field select {
   11. border: 2px solid red;
   12. background-color: #FFFFD5;
   13. margin: 0px;
   14. color: red;

   15. }

       
       

       在这可以下载示例代码 。