Back

jquery validate validation 的步骤

发布时间: 2015-07-30 06:44:00

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://showmethemoney.sweetysoft.com//image/670/jquery.validate.min.js
http://showmethemoney.sweetysoft.com//image/668/jquery.validate.message.zhcn.js   ( 中文消息提示) 

2. 有个最简单的form:     

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

<form  >
   <input type='text' name="mall_product[name]" />
</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://showmethemoney.sweetysoft.com//image/666/unchecked.gif) no-repeat 0px 0px;
  padding-left: 16px;
  font-weight: bold;
  color: #EA5200;
}

label.checked{
  background: url(http://showmethemoney.sweetysoft.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");    
    },
    // 验证失败后,该怎么办 (注意:这里对于DOM的安排,要略加调整)
    highlight: function(element, errorClass) {
      // 适用于把 错误信息,显示在隔壁tr中, 例如:  
      /*   <tr>  <td>输入框</td><td>  X不能为空</td>   <tr/> */
      $(element).parent().next().find("." + errorClass).removeClass("checked");

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

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

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

5. 对某个区域手动触发 验证, 特别有用 

$("#myform").validate().element("#i1");

Back