1.
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>
