jquery validation 的步骤

访问量: 1094

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

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

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

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

使用步骤:

1. 为页面增加两个 js : 

http://jqueryvalidation.org/files/lib/jquery.js
http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.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("<%= asset_path 'unchecked.gif' %>") no-repeat 0px 0px;
  padding-left: 16px;
  padding-bottom: 2px;
  font-weight: bold;
  color: #EA5200;
}

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

结束。 

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

订阅/RSS Feed

Subscribe

分类/category