代码拉取完成，页面将自动刷新
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validform demo -- 一行代码搞定整站的表单验证！</title>
<meta name="Keywords" content=" " />
<meta name="Description" content=" " />
<link href="css/css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>提示效果一：弹出框提示</h1>
<form class="registerform">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">用户名：</td>
<td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="s6-18" ajaxurl="valid.php" errormsg="昵称至少6个字符,最多18个字符！" /></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need"></td>
<td>真实姓名：</td>
<td><input type="text" value="" name="username" class="inputxt" datatype="s" ignore="ignore" errormsg="请输入您的真实姓名！" /></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>移动电话：</td>
<td><input type="text" value="" name="tel" class="inputxt" datatype="m" errormsg="请输入您的手机号码！" /></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>备注：</td>
<td colspan="2">
<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！" datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
</td>
</tr>
<tr>
<td class="need"></td>
<td colspan="3" class="tip">
<input type="checkbox" class="rt2" name="legal" id="legal" datatype="checkbox" errormsg="阅读并同意会员条款才能进入下一步！" /><label for="legal">我已阅读并同意《会员隐私条款》</label>
</td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td colspan="2" style="padding:10px 0 18px 0;">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" />
</td>
</tr>
</table>
</form>
<h1>提示效果二：右侧提示</h1>
<form class="registerform" action="ajax_post.php">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">用户名：</td>
<td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="s6-18" ajaxurl="valid.php" nullmsg="请输入用户名！" errormsg="昵称至少6个字符,最多18个字符！" /></td>
<td><div class="Validform_checktip">昵称至少6个字符,最多18个字符</div></td>
</tr>
<tr>
<td class="need">*</td>
<td>密码：</td>
<td><input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间,不能使用空格！" /></td>
<td><div class="Validform_checktip">密码范围在6~16位之间,不能使用空格</div></td>
</tr>
<tr>
<td class="need">*</td>
<td>确认密码：</td>
<td><input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>
<td><div class="Validform_checktip">两次输入密码需一致</div></td>
</tr>
<tr>
<td class="need"></td>
<td>Email：</td>
<td><input type="text" value="" name="email" class="inputxt" datatype="e" ignore="ignore" nullmsg="请输入您常用的邮箱！" errormsg="请输入您常用的邮箱！" /></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>性别：</td>
<td><input type="radio" value="1" name="gender" id="male" class="pr1" datatype="radio" errormsg="请选择性别！" /><label for="male">男</label> <input type="radio" value="2" name="gender" id="female" class="pr1" /><label for="female">女</label></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>省份：</td>
<td><select name="province" id="province" datatype="select" errormsg="请选择省份！" ><option value="">--请选择省份--</option><option value="1">江西省</option></select></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>购物网：</td>
<td>
<input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox" value="1" datatype="checkbox" errormsg="请选择您常去的购物网站！" /><label for="shoppingsite21">淘宝网</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox" value="2" /><label for="shoppingsite22">当当网</label>
</td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td colspan="2" style="padding:10px 0 18px 0;">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" />
</td>
</tr>
</table>
</form>
<h1>提示效果三：【自定义提示效果】右侧提示，ajax提交时不弹出提示层</h1>
<form class="registerform" action="ajax_post.php">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">中文名：</td>
<td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="z2-4" ajaxurl="valid.php" nullmsg="请输入中文名！" errormsg="中文名为2~4个中文字符！" /></td>
<td><div class="Validform_checktip">中文名为2~4个中文字符！</div></td>
</tr>
<tr>
<td class="need">*</td>
<td>密码：</td>
<td><input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间,不能使用空格！" /></td>
<td><div class="Validform_checktip">密码范围在6~16位之间,不能使用空格</div></td>
</tr>
<tr>
<td class="need">*</td>
<td style="width:205px;">确认密码：</td>
<td><input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>
<td><div class="Validform_checktip">两次输入密码需一致</div></td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td colspan="2" style="padding:10px 0 18px 0;">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" /><span id="msgdemo" style="margin-left:30px;"></span>
</td>
</tr>
</table>
</form>
<h1>提示效果四：【自定义提示效果】固定位置显示提示信息</h1>
<form class="registerform" action="ajax_post.php">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">用户名：</td>
<td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="s6-18" ajaxurl="valid.php" nullmsg="请输入用户名！" errormsg="昵称至少6个字符,最多18个字符！" /></td>
<td></td>
</tr>
<tr>
<td class="need"></td>
<td>真实姓名：</td>
<td><input type="text" value="" name="username" class="inputxt" datatype="s" ignore="ignore" errormsg="请输入您的真实姓名！" /></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>密码：</td>
<td><input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间,不能使用空格！" /></td>
<td></td>
</tr>
<tr>
<td class="need">*</td>
<td style="width:205px;">确认密码：</td>
<td><input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>
<td></td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td colspan="2" style="padding:10px 0 18px 0;">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" /><span id="msgdemo2" style="margin-left:30px;"></span>
</td>
</tr>
</table>
</form>
<h1>提示效果五：【自定义提示效果】使用自定义弹出框</h1>
<form class="registerform" action="ajax_post.php">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">中文名：</td>
<td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="z1-2" ajaxurl="valid.php" nullmsg="请输入中文名！" errormsg="中文名为2~4个中文字符！" /></td>
<td></td>
</tr>
<tr>
<td class="need">*</td>
<td>密码：</td>
<td><input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间,不能使用空格！" /></td>
<td></td>
</tr>
<tr>
<td class="need">*</td>
<td style="width:205px;">确认密码：</td>
<td><input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>
<td></td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td colspan="2" style="padding:10px 0 18px 0;">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" /><span id="msgdemo2" style="margin-left:30px;"></span>
</td>
</tr>
</table>
</form>
<br />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/Validform_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！下面是演示几种不同的验证效果;
//提示效果一;
$(".registerform:first").Validform();
//提示效果二;
$(".registerform:eq(1)").Validform({
tiptype:2,
ajaxPost:true,
callback:function(data){
//返回数据data是json格式，{"info":"demo info","status":"y"}
//info: 输出提示信息;
//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功，"n"表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作;
//你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作；
//这里执行回调操作;
if(data.status=="y"){
setTimeout(function(){
$.Hidemsg(); //公用方法关闭信息提示框;
},2000);
}
}
});
//提示效果三;
//传入自定义datatype类型【方式一】;
//$.extend($.Datatype,{
// "z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
// "*6-20": /^[^\s]{6,20}$/
//});
$(".registerform:eq(2)").Validform({
tiptype:function(msg,o,cssctl){
//msg：提示信息;
//o:{obj:*,type:*}, obj指向的是当前验证的表单元素，type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态;
//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
if(o.obj){//o.obj不为空说明是在检测表单元素;
var objtip=o.obj.parent().next().find(".Validform_checktip");
cssctl(objtip,o.type);
objtip.text(msg);
}else{//o.obj为空说明是表单提交操作;
var objtip=$("#msgdemo");
cssctl(objtip,o.type);
objtip.text(msg);
}
},
datatype:{//传入自定义datatype类型【方式二】;
"z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"*6-20": /^[^\s]{6,20}$/
},
ajaxPost:true,
postonce:true
});
//提示效果四;
$(".registerform:eq(3)").Validform({
tiptype:function(msg,o,cssctl){
var objtip=$("#msgdemo2");
cssctl(objtip,o.type);
objtip.text(msg);
},
ajaxPost:true
});
//提示效果五;
var showmsg=function(msg){//假定你的信息提示方法为showmsg， 在方法里可以接收参数msg，当然也可以接收到o及cssctl;
alert(msg);
}
$(".registerform:eq(4)").Validform({
tiptype:function(msg){
showmsg(msg);
},
tipSweep:true,//为true时提示信息将只会在表单提交时触发显示，各表单元素blur时不会被触发显示;
ajaxPost:true
});
//调取公用方法显示信息提示框，可用于全站统一的弹出框提示效果;
//$.Showmsg("Test Info here!"); //公用方法显示信息提示框;
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。