rails中使用最经典的jquery validation框架

June 06, 2018 17:28
访问量:283
摘要:很多时候我们要做表单的输入验证, 对于rails ,验证可以放在后端, 但是用起来有不少弊端。 所以前端做验证最轻松。也实现起来最快。 jquery validation 是最有名的验证框架。
  • 定制 错误消息 区域
  • 定制使用 custom rule

使用步骤:

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,只有一列, 输入一个非空 文本就可以。表单看起来是:

<form  >
   <input type='text' name="mall_product[name]" />
</form>

就需要写这样的js:

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

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

输入图片说明

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");    
    },
    // 验证失败后,该怎么办 (注意:这里对于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.....

参考地址:

milk example: http://jqueryvalidation.org/files/demo/milk/

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站