Web.py下表单的Ajax实时验证

web.py目前并没有对ajax的官方支持. Google Code上只有一个 ajaxweb的项目, 可以暂时用一下.

利用jquey的库, 可以自己很轻松的实现这一个功能.

html:

1.             <form id="signup" action="/user/add/" method="post">
2.                 <fieldset>
3.                     <legend>请输入您的信息:</legend>
4.                     
5.                     <p>
6.                         <label for="nickname">昵称:</label><br>
7.                         <input type="text" class="text" name="nickname" id="nickname" maxlength="40">
8.                         <span id="validateUsername"></span>
9.                     </p>
10.                     <p>
11.                         <label for="email">邮件地址:</label><br>
12.                         <input type="text" class="text" name="email" id="email" maxlength="40">
13.                         <span id="validateEmail"></span>
14.                     </p>
15.                     <p>
16.                         <label for="passwd">密码:</label><br>
17.                         <input type="password" class="text" name="passwd" id="passwd" maxlength="40">
18.                     </p>
19.                     <p>
20.                         <input type="submit" value="注册"></input>
21.                         <input type="reset" value="重来"></input>
22.                     </p>
23.                 </fieldset>
24.             </form>

Js:

1.     //validate
2.     var validateUsername = $('#validateUsername');
3.     $('#nickname').keyup(function () {
4.         var t = this;
5.         if (this.value != this.lastValue && this.value != '') {
6.             if (this.timer) clearTimeout(this.timer);
7.              
8.              //show checking status
9.             validateUsername.html(
10.                 '检查昵称是否存在...'
11.             );
12.             
13.             this.timer = setTimeout(function () {
14.                 $.ajax({
15.                     url: '/user/validate/',
16.                     data: 'action=check_nickname&value=' + t.value,
17.                     type: 'post',
18.                     success: function (j) {
19.                         validateUsername.html(j);
20.                     }
21.                 });
22.             
23.             }, 500);
24.             //end timer
25.             this.lastValue = this.value;
26.         }
27.     
28.     });

这段代码肯定是在document ready的事件里了. 由于"$"的关系, 需要把js分离出html.

服务端:

(只是初步的处理了一下)

1. class validate:
2.     def POST(self):
3.         i = web.input()
4.         if i.action == 'check_nickname':
5.             return self.validateName(i.value)
6.         elif i.action == 'check_email':
7.             return self.validateEmail(i.value)
8.     
9.     
10.     def validateName(self, name):
11.         return web.config.session.query(user).filter_by(nickname=name).count()
12.     
13.     
14.     def validateEmail(self, e):
15.         if re.match("^.+//@(//[?)[a-zA-Z0-9//-//.]+//.([a-zA-Z]{2,3}|[0-9]{1,3})(//]?)$", e) == None:
16.             return False
17.             
18.         return web.config.session.query(user).filter_by(email=e).count() == 0
19.