jQuery表单验证插件下载地址:http://plugins.jquery.com/project/validate

直接上代码了

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="GBK">
    
<head>
        
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
        
<meta http-equiv="Content-Language" content="GBK" />
        
<title>测试页面</title>
        
        
<link type="text/css" rel="stylesheet" href="css/detailTable.css"/>
        
<link type="text/css" rel="stylesheet" href="css/validate.css"/>

        
<script type="text/javascript" src="js/jquery-1.5.1.min.js" charset="UTF-8"></script>
        
<script type="text/javascript" src="js/jquery.metadata.js" charset="UTF-8"></script>
        
<script type="text/javascript" src="js/jquery.validate.js" charset="UTF-8"></script>
        
<script type="text/javascript" src="js/messages_cn.js" charset="UTF-8"></script>
        
<script type="text/javascript">
         $(
function(){
             $(
'#formTable').validate({
                 rules: { groupName: {minlength: 
2, required: true},
                          groupDesc: {email: 
true, required: true
                  },
                  messages: {  groupName: {required: 
"必填", minlength: "最少两个字符" },
                               groupDesc: {required: 
"必填", email: "请输入正确email格式" }
                             },
                  errorElement: 
"em",
                  success: 
function(label) {
                  label.text(
" ").addClass("success");
                  }
                 });
         });
        
</script>
    
</head>
    
<body>
        
<form action="#" method="post" id="formTable">
            
<input type="hidden" name="groupId" value="<s:property value='multicastGroup.groupId'/>"/>
            
<table id="detailTable">
                
<caption>测试修改</caption>
                
<tbody>
                    
<tr>
                        
<th width="15%">名称</th>
                        
<td colspan="3" width="85%">
                            
<input type="text" name="groupName" id="groupName" size="50"/>
                            
<span id="groupNameTip"></span>
                        
</td>
                    
</tr>
                    
<tr>
                        
<th width="15%">描述</th>
                        
<td width="85%" colspan="3">
                            
<textarea name="groupDesc" id="groupDesc"></textarea>
                            
<span id="groupDescTip"></span>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td width="100%" colspan="4" align="center">
                            
<input type="submit" value="提交" class="controlButton"/>
                            
<input type="button" value="取消" onclick="location.href='MulticastGroup.action'" class="controlButton"/>
                        
</td>
                    
</tr>
                
</tbody>
            
</table>
        
</form>
    
</body>
</html>

相关文章: