首先，导入jquery框架包
然后，布局表单
<form name="form1" action="" method="post"> <dl> <dt><span>账号：</span><input type="text" name="member_code" id="member_code" class="input0"><label class="red" id="member_code_red"></label></dt> <dt><span>密码：</span><input type="password" name="member_password" id="member_password" class="input0"><label class="red" id="member_password_red"></label></dt> <dt><span>确认密码：</span><input type="password" name="password_confirm" id="password_confirm" class="input0"><label class="red" id="password_confirm_red"></label></dt> <dt><span>手机：</span><input type="text" name="member_tel" id="member_tel" class="input0"><label class="red" id="member_tel_red"></label></dt> <dt><span>QQ：</span><input type="text" name="member_email_qq" id="member_email_qq" class="input0"><label class="red" id="member_email_qq_red"></label></dt> <dt><span>EMAIL：</span><input type="text" name="member_email" id="member_email" class="input0"><label class="red" id="member_email_red"></label></dt> <dt><span>性别：</span> 女<input type="radio" name="member_sex" value="0" checked="checked"> 男<input type="radio" name="member_sex" value="1"><label class="red" id="member_sex_red"></label></dt> <dt><span>会员类别：</span> 类别1<input type="radio" name="member_group" value="2"checked="checked">  类别2<input type="radio" name="member_group" value="1"><label class="red"></label></dt> <dt><span>推荐人：</span><input type="text" name="member_recommanded_member_id" class="input0" readonly='true'></dt> <dt><span></span><input type="submit" name="submit" class="formsubmit"><label class="red"></label></dt> <dt><a href="">《服务协议》</a></dt> </dl> </form>
最后写调用事件jquery代码
<script type="text/javascript">//表单验证jquery$(document).ready( function(){ //用户名验证 var temp=true; $("#member_code").blur( function(){ var member_code=$("#member_code").val(); var reg=/^[A-Za-z0-9]+$/;//正则表达式不能加引号 var leng=parseInt(member_code.replace(/\s/g,"").length); if(leng<=0){ $("#member_code_red").html("不能为空值");temp=false; }else if(!reg.test(member_code)){ $("#member_code_red").html("格式错误，应由字母和数字组成");temp=false; }else{ $("#member_code_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>"); } } ); //密码验证 $("#member_password").blur( function(){ var member_password=$("#member_password").val(); var leng=parseInt(member_password.replace(/\s/g,"").length); if(leng<=0){ $("#member_password_red").html("不能为空值");temp=false; }else if(leng<6){ $("#member_password_red").html("密码最少6位");temp=false; }else{ $("#member_password_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>"); } } ); //密码确认 $("#password_confirm").blur( function(){ var member_password=$("#member_password").val(); var password_confirm=$("#password_confirm").val(); var leng=parseInt(password_confirm.replace(/\s/g,"").length); if(leng<=0){ $("#password_confirm_red").html("不能为空值");temp=false; }else if(member_password==password_confirm){ $("#password_confirm_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>"); }else{ $("#password_confirm_red").html("两次输入密码不一致");temp=false; } } ); //手机号验证 $("#member_tel").blur( function(){ var member_tel=$("#member_tel").val(); var reg=/^[1][358][0-9]{9}$/; var leng=parseInt(member_tel.replace(/\s/g,"").length); if(leng<=0){ $("#member_tel_red").html("不能为空值");temp=false; }else if(!reg.test(member_tel)){ $("#member_tel_red").html("格式错误，请输入正确的手机号");temp=false; }else{ $("#member_tel_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>"); } } ); //QQ号验证 $("#member_email_qq").blur( function(){ var member_email_qq=$("#member_email_qq").val(); var reg=/^\d{5,10}$/; var leng=parseInt(member_email_qq.replace(/\s/g,"").length); if(leng<=0){ $("#member_email_qq_red").html("不能为空值");temp=false; }else if(!reg.test(member_email_qq)){ $("#member_email_qq_red").html("格式错误，请输入正确的QQ号");temp=false; }else{ $("#member_email_qq_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>"); } } ); //邮箱验证 $("#member_email").blur( function(){ var member_email=$("#member_email").val(); var reg=/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/; var leng=parseInt(member_email.replace(/\s/g,"").length); if(leng<=0){ $("#member_email_red").html("不能为空值");temp=false; }else if(!reg.test(member_email)){ $("#member_email_red").html("格式错误，请输入正确的邮箱");temp=false; }else{ $("#member_email_red").html("<img src='__ROOT__/Tpl/{:C(DEFAULT_THEME)}/Static/images/status-1.gif'>"); } } ); //表单提交 $("#form").submit( function(){ $("#member_code").blur(); $("#member_password").blur(); $("#password_confirm").blur(); $("#member_tel").blur(); $("#member_email_qq").blur(); $("#member_email").blur(); var length=parseInt($("#member_code_red").text().length)+ parseInt($("#member_password_red").text().length)+ parseInt($("#password_confirm_red").text().length)+ parseInt($("#member_tel_red").text().length)+ parseInt($("#member_email_qq_red").text().length)+ parseInt($("#member_email_red").text().length); if(length>0){return false;} } ); });</script>