jquery之表单验证（表单验证之必需字段不能为空）-利用span定义错误信息和event.preventDefault()方法的实用

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>表单验证之必需字段不能为空</title>
 8         <style type="text/css">
 9             .label {float:left; width:120px;}
10             .infobox {width: 200px; }
11             .error {color:red; padding-left: 10px;}
12             .submit {margin-left: 125px; margin-top: 10px; }
13         </style>
14         <script src="jquery-1.5.2.js" type="text/javascript"></script>
15         <script type="text/javascript">
16             $(document).ready(function(){
17                 //先把错误标签隐藏
18                 $('.error').hide();
19                 $('.submit').click(function(event) {
20                     //获取input内容
21                     var data = $('.infobox').val();
22                     var len = data.length;
23                     if(len<1) {
24                         $('.error').show();
25                         //取消事件的默认动作。
26                         /*
27                         该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
28                         例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，
29                         可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，
30                         或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
31                         */
32                         event.preventDefault();
33                     }
34                     else {
35                         $('.error').hide();
36                     }
37                 });
38                 
39             });
40         </script>
41         <body>
42             <form id="signup" method="post" action="">
43                 <div>
44                     <span class="label">User Id *</span>
45                     <input type="text" class="infobox" name="userid" />
46                     <span class="error">This field cannot be blank</span>
47                 </div>
48                 <input class="submit" type="submit" value="submit" />
49             </form>
50         </body>
51 </html>
posted on 2017-01-18 00:09 Sharpest 阅读(340) 评论(0) 收藏举报