文圆承的博客

jquery validate validation 的步骤

参考地址：http://siwei.me/blog/posts/jquery-validate-validation--2

refer to: http://jqueryvalidation.org/files/demo/milk/

(注意：这里是基本用法。）　

1. 定制　错误消息　区域

2. 定制使用 custom rule

很多时候我们要做表单的输入验证。对于rails ，验证可以放在后端，但是用起来有不少弊端。

所以，前端做验证最轻松。也实现起来最快。

jquery validation 是最有名的验证框架。它的最好看的例子就是 milk 的例子： (见上面link)

使用步骤：

1. 为页面增加3个 js :

http://jqueryvalidation.org/files/lib/jquery.js
http://siweitech.b0.upaiyun.com//image/670/jquery.validate.min.js
http://siweitech.b0.upaiyun.com//image/668/jquery.validate.message.zhcn.js   ( 中文消息提示)

2. 有个最简单的form:

只有一列，输入一个非空文本就可以。表单看起来是：

就需要写这样的js:

    $("form").validate({
      rules: {
        "mall_product[name]": "required"
      },
      messages: {
        "mall_product[name]": "不能是空"
      }
    })

3. 看起来就很像回事了：

Form Validation

4. 在全局css 文件中（application.css ) 增加几行：

input.error{
  border-color: #a94442 !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #a94442 !important;
}

label.error{
  background: url(http://siweitech.b0.upaiyun.com//image/666/unchecked.gif) no-repeat 0px 0px;
  padding-left: 16px;
  font-weight: bold;
  color: #EA5200;
}

label.checked{
  background: url(http://siweitech.b0.upaiyun.com//image/667/checked.gif) no-repeat 0px 0px;
  padding-left: 16px;
  font-weight: bold;
  color: #EA5200;
}

然后记得 $ wget http://jqueryvalidation.org/files/demo/images/unchecked.gif , 把这个文件copy 到 app/assets/images 目录下

结束。

更多内容，请参考 milk的例子。

提示：如果有多个规则，怎么办？

  // 先为当前table 每个tr后面都添加 td
$("form table tr").each(function(i, e){
  $(e).append("<td></td>")
})

  // 然后开始验证
  $("form").validate({
    rules: {
      return_count: {
        required: true,
        number: true
      }
    },
    messages: {
      return_count: {
        required: "不能是空",
        number: "只能是数字"
      }
    },
    // 验证通过后，该怎么办
    success: function(label) {
      // 这里的 &nbsp; 是不能省略的．否则会导致　对号看不到．（label的样式在某些情况下是display:inline-block的)
      label.html("&nbsp;").addClass("checked");    
    },
    // 验证失败后，该怎么办　（注意：这里对于ＤＯＭ的安排，要略加调整)
    highlight: function(element, errorClass) {
      // 适用于把　错误信息，显示在隔壁tr中，　例如：  
      /*   <tr>  <td>输入框</td><td> 　Ｘ不能为空</td>   <tr/> */
      $(element).parent().next().find("." + errorClass).removeClass("checked");

      // 适用于　紧挨着。输入框显示错误信息
      $(element).next().removeClass("checked");
    }, 
     // 这个函数很重要,就是确定把出错提示显示在哪里的.  默认放在input紧挨着的后面．
     // 如果你的表单嵌套在　ｔａｂｌｅ中，类似于milk demo, 则务必使用下面这句话，否则会找不到．　
     errorPlacement: function(error, element) {
       error.appendTo(element.closest('td').next());
     }
  })

可以通过这几行代码，进入到　调试模式（表单不会被真正提交)

  jQuery.validator.setDefaults({
      debug: true,
        success: "valid"
  });
  $('your form ').validate.....

返回列表

Music box