jquery.Validation是一款优秀的jquery插件，它能对客户端表单进行验证，并且提供了许多可以定制的属性和方法，良好的扩展性。在以前做过的几个项目中，我都用到了Validation，现在结合实际情况，我把项目中经常要用到的验证整理成一个实例DEMO，本文就是通过讲解这个实例来理解Validation的应用。

Read More

数据库表 user_login_info
字段：id，user_ip，user_id，last_access_time

user_id 做唯一性索引

1. 用户登录后
   如果没有当前用户的数据，插入一条数据，user_ip(用户机器的IP)，user_id(用户ID)，last_access_time(当前登录时间)
   如果已经存在，则更新 user_ip，last_access_time 2个字段

   Read More

最近写了点前端代码，验证form表单的时候用到了jquery validate。这个东西很好用，具体的使用方法就不必啰嗦了。

这个东西主要是用来验证表单数据的格式，有时候虽然格式正确了但是还要保证某些字段的唯一性，就要另外判断了，我用的方法是在form加一个onsubmit事件。

测试的时候发现，只要满足validate验证的格式，onsubmit的判断会被忽略掉。事实上，jquery validate也是在submit的时候开始判断的，并且在onsubmit事件之后，所以onsubmit返回false，只要满足validate的条件仍然会返回true，表单仍被提交。不仅如此，我在script脚本中的submi()在validate验证后会自动执行，也就是说，即使验证不通过，表单仍然可以通过submit()函数自动提交。

这个时候就需要在构造validate规则的时候加上submitHandler。

Read More

1. 自定义验证–成功提示

1） 添加选项

1
2
3
4
5
6
7
8
9
10
11
12

errorClass: "unchecked"，  
validClass: "checked"，  
errorElement: "span"，  
errorPlacement: function （error， element） {  
    if （element.parent（）.find（"span[for=""" + element.attr（"id"） + """]"） != null） {  
        element.parent（）.find（"span[for=""" + element.attr（"id"） + """]"）.remove（）;  
    }  
    error.appendTo（element.parent（））;  
}，  
success: function （label） {  
    label.removeClass（"unchecked"）.addClass（"checked"）;  
}，  

Read More

业务场景
有一个订单列表，列表的每一行，分别是商品id，商品名称，商品数量，其中商品数量可以修改，修改完毕后提交整个表单。表单结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<table id="productList">
  <tr>
    <th width=300>菜品</th>
    <th width=200>数量</th>
    <th width=300>操作</th>
  </tr>
  <?php foreach($list as $k){ ?>
    <tr class="oparea">
      <td class="list">
        <span class="vegsid" data-id="<?php echo $k['id'];?>"><!--data-id是自定义属性，专门用来存放id-->
          <?php echo $k[ 'name'];?>
        </span>
      </td>
      <td class="list">
        <input class="num" value="1" maxlength="4">
      </td>
      <td>
        <span class="deldata">移除</span>
      </td>
    </tr>
    <?php }?>
    <tr>
      <td colspan=7 class="list">
        <span class="sub">提交订单</span>
      </td>
    </tr>
</table>

Read More