1，表单代码
<form action="addCp" method="post" name="form1" id="form1">
<fieldset>
<!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
<p>
<label>公司全称</label>
<input class="text-input medium-input datepicker" type="text" id="full_name" name="full_name" />
<div id="full_name1"></div>
<br />
</p>
<p>
<label>公司简称</label>
<input class="text-input medium-input datepicker" type="text" id="short_name" name="short_name" />
<div id="short_name1"></div>
<br />
</p>
<p>
<label>所属行业</label>
<select name="industry" class="small-input">
<option value="1">食品</option>
<option value="2">教育</option>
<option value="3">体育用品</option>
<option value="4">传媒</option>
</select>
</p>
<p>
<label>公司地址</label>
<input class="text-input medium-input datepicker" type="text" id="address" name="address" />
<div id="address1"></div>
<br />
</p>
<p>
<label>公司网址</label>
<input class="text-input medium-input datepicker" type="text" id="com_url" name="com_url" />
<div id="com_url1"></div>
<br />
</p>
<p>
<label>公司代表</label>
<input class="text-input medium-input datepicker" type="text" id="linkMan" name="linkMan" />
<div id="linkMan1"></div>
<br />
</p>
<p>
<label>性别</label>
<input type="radio" name="sex" value="1"/>
男
<input type="radio" name="sex" value="0"/>
女 </p>
<p>
<label>公司电话号码</label>
<input class="text-input medium-input datepicker" type="text" id="tel" name="tel" />
<div id="tel1"></div>
<br />
</p>
<p>
<label>公司描述</label>
<textarea class="text-input textarea wysiwyg" id="textarea" name="desc" cols="79" rows="15"></textarea>
</p>
<p>
<input class="button" type="submit" value="保存" />
</p>
</fieldset>
<div class="clear"></div>
<!-- End .clear -->
</form>
2，js代码
<script type="text/javascript">
jQuery(document).ready(function(){
$("#full_name").focus();
$("#full_name").blur(function(){
name= $("#full_name").val();
$("#full_name1").html("<img src=\"images/classic-loader.gif\">");
$.get("checkCp!checkFullName", { full_name:name } ,function(data){
if(data==0) {
jQuery("#full_name1").html("<img src=\"images/pic_03.gif\">");
}
else {jQuery("#full_name1").html("<img src=\"images/pic_02.gif\">已存在");}
});
});
$("#short_name").blur(function(){
name= $("#short_name").val();
if(name.length == 0) {
jQuery("#short_name1").html("<img src=\"images/pic_02.gif\">不能为空！");
$("#short_name").focus();
}
else
jQuery("#short_name1").html("<img src=\"images/pic_03.gif\">");
});
$("#address").blur(function(){
name= $("#address").val();
if(name.length == 0) {
jQuery("#address1").html("<img src=\"images/pic_02.gif\">不能为空！");
$("#address").focus();
}
else
jQuery("#address1").html("<img src=\"images/pic_03.gif\">");
});
$("#com_url").blur(function(){
str = $("#com_url").val();
var pattern = /^(http[s]{0,1}:\/\/(.)*)/i;
var mts = pattern.exec(str);
if(mts != null)
jQuery("#com_url1").html("<img src=\"images/pic_03.gif\">");
else {
jQuery("#com_url1").html("<img src=\"images/pic_02.gif\">网址错误！");
$("#com_url").focus();
}
});
$("#linkMan").blur(function(){
name= $("#linkMan").val();
if(name.length == 0) {
jQuery("#linkMan1").html("<img src=\"images/pic_02.gif\">不能为空！");
}
else
jQuery("#linkMan1").html("<img src=\"images/pic_03.gif\">");
});
$("#tel").blur(function(){
str = $("#tel").val();
var pattern = /^((\+86)|(86))?(1)\d{10}$/;
var mts = pattern.exec(str);
if(mts != null)
jQuery("#tel1").html("<img src=\"images/pic_03.gif\">");
else {
jQuery("#tel1").html("<img src=\"images/pic_02.gif\">手机号码不正确！");
$("#tel").focus();
}
});
});
</script>
3，引入jquery文件
<script type="text/javascript" src="resources/scripts/jquery-1.3.2.min.js"></script>
4，struts Action文件代码
public void checkFullName() {
try {
int flag = dao.checkCpFullName(full_name);//DAO是和数据库层的
Thread.currentThread().sleep(1000);
PrintWriter out = ServletActionContext.getResponse().getWriter();
out.println(flag);
} catch (Exception e) {
e.printStackTrace();
}
}