12、jQuery插件之Validform表单验证插件
官网:http://validform.rjboy.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<h2 class="green">智能的提示信息</h2>
<form class="registerform" action="ajax_post.php">
<ul>
<li>
<label class="label">
<span class="need">*</span> 中文名
</label>
<input type="text" value="" name="name" class="inputxt" />
</li>
<li>
<label class="label">
<span class="need">*</span> 密码：
</label>
<input type="password" value="" name="userpassword" class="inputxt" />
</li>
<li>
<label class="label">
<span class="need">*</span> 确认密码：
</label>
<input type="password" value="" name="userpassword2" class="inputxt" />
</li>
<li>
<label class="label">
<span class="need">*</span> 所在城市：
</label>
<select name="province" >
<option value="">请选择城市</option>
<option value="1">瑞金市</option>
</select>
</li>
<li>
<label class="label">
<span class="need">*</span> 性别：
</label>
<input type="radio" value="1" name="gender" id="male" class="pr1" />
<label for="male">男</label>
<input type="radio" value="2" name="gender" id="female" class="pr1" />
<label for="female">女</label>
</li>
<li>
<label class="label">
<span class="need">*</span> 购物网：
</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox" value="1" />
<label for="shoppingsite21">新蛋</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox" value="2" />
<label for="shoppingsite22">淘宝</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox" value="3" />
<label for="shoppingsite23">京东</label>
</li>
</ul>
<div class="action">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
var demo=$(".registerform").Validform({
tiptype:3,
label:".label",
showAllError:true,
datatype:{
"zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
},
ajaxPost:true
});
//通过$.Tipmsg扩展默认提示信息;
//$.Tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
demo.tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
demo.addRule([{
ele:".inputxt:eq(0)",
datatype:"zh2-4"
},
{
ele:".inputxt:eq(1)",
datatype:"*6-20"
},
{
ele:".inputxt:eq(2)",
datatype:"*6-20",
recheck:"userpassword"
},
{
ele:"select",
datatype:"*"
},
{
ele:":radio:first",
datatype:"*"
},
{
ele:":checkbox:first",
datatype:"*"
}]);
})
</script>
</body>
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<h2 class="green">智能的提示信息</h2>
<form class="registerform" action="ajax_post.php">
<ul>
<li>
<label class="label">
<span class="need">*</span> 中文名
</label>
<input type="text" value="" name="name" class="inputxt" />
</li>
<li>
<label class="label">
<span class="need">*</span> 密码：
</label>
<input type="password" value="" name="userpassword" class="inputxt" />
</li>
<li>
<label class="label">
<span class="need">*</span> 确认密码：
</label>
<input type="password" value="" name="userpassword2" class="inputxt" />
</li>
<li>
<label class="label">
<span class="need">*</span> 所在城市：
</label>
<select name="province" >
<option value="">请选择城市</option>
<option value="1">瑞金市</option>
</select>
</li>
<li>
<label class="label">
<span class="need">*</span> 性别：
</label>
<input type="radio" value="1" name="gender" id="male" class="pr1" />
<label for="male">男</label>
<input type="radio" value="2" name="gender" id="female" class="pr1" />
<label for="female">女</label>
</li>
<li>
<label class="label">
<span class="need">*</span> 购物网：
</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox" value="1" />
<label for="shoppingsite21">新蛋</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox" value="2" />
<label for="shoppingsite22">淘宝</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox" value="3" />
<label for="shoppingsite23">京东</label>
</li>
</ul>
<div class="action">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
var demo=$(".registerform").Validform({
tiptype:3,
label:".label",
showAllError:true,
datatype:{
"zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
},
ajaxPost:true
});
//通过$.Tipmsg扩展默认提示信息;
//$.Tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
demo.tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
demo.addRule([{
ele:".inputxt:eq(0)",
datatype:"zh2-4"
},
{
ele:".inputxt:eq(1)",
datatype:"*6-20"
},
{
ele:".inputxt:eq(2)",
datatype:"*6-20",
recheck:"userpassword"
},
{
ele:"select",
datatype:"*"
},
{
ele:":radio:first",
datatype:"*"
},
{
ele:":checkbox:first",
datatype:"*"
}]);
})
</script>
</body>
</html>
给表单元素绑定验证类型和提示汉字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页»</a></p>
<h2 class="green">给表单元素绑定验证类型和提示文字</h2>
<form class="registerform" method="post" 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" 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="tel" class="inputxt" datatype="m" errormsg="请输入您的手机号码！" /></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>所在城市：</td>
<td><select name="province" datatype="*" nullmsg="请选择所在城市！" 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 type="radio" value="1" name="gender" id="male" class="pr1" datatype="*" 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>
<input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox" value="1" datatype="*" errormsg="请选择您常去的购物网站！" /><label for="shoppingsite21">新蛋</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox" value="2" /><label for="shoppingsite22">淘宝</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox" value="3" /><label for="shoppingsite23">京东</label>
</td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need"></td>
<td>备注：</td>
<td colspan="2">
<textarea tip="请在这里输入您的意见。" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
</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>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
tiptype:2
});
})
</script>
</body>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页»</a></p>
<h2 class="green">给表单元素绑定验证类型和提示文字</h2>
<form class="registerform" method="post" 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" 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="tel" class="inputxt" datatype="m" errormsg="请输入您的手机号码！" /></td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need">*</td>
<td>所在城市：</td>
<td><select name="province" datatype="*" nullmsg="请选择所在城市！" 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 type="radio" value="1" name="gender" id="male" class="pr1" datatype="*" 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>
<input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox" value="1" datatype="*" errormsg="请选择您常去的购物网站！" /><label for="shoppingsite21">新蛋</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox" value="2" /><label for="shoppingsite22">淘宝</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox" value="3" /><label for="shoppingsite23">京东</label>
</td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need"></td>
<td>备注：</td>
<td colspan="2">
<textarea tip="请在这里输入您的意见。" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
</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>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
tiptype:2
});
})
</script>
</body>
</html>
给表单下的任一对象绑定提交表单方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页»</a></p>
<h2 class="green">给表单下的任一对象绑定提交表单方法</h2>
<form class="registerform" method="post" 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" 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="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="请在这里输入您的意见。" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
</td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td colspan="2" style="padding:10px 0 18px 0;">
<a href="javascript:void(0);" class="btn_sub mr20">提交表单</a>
<a href="javascript:void(0);" class="btn_reset">重置表单</a>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
btnSubmit:".btn_sub",
btnReset:".btn_reset"
});
})
</script>
</body>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页»</a></p>
<h2 class="green">给表单下的任一对象绑定提交表单方法</h2>
<form class="registerform" method="post" 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" 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="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="请在这里输入您的意见。" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
</td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td colspan="2" style="padding:10px 0 18px 0;">
<a href="javascript:void(0);" class="btn_sub mr20">提交表单</a>
<a href="javascript:void(0);" class="btn_reset">重置表单</a>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
btnSubmit:".btn_sub",
btnReset:".btn_reset"
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页»</a></p>
<h2 class="green">密码强度提示与验证提示同时显示</h2>
<form class="registerform" action="ajax_post.php" method="post">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">密码：</td>
<td style="width:210px;">
<input type="password" value="" name="password" class="inputxt" plugin="passwordStrength" datatype="*6-18" errormsg="密码至少6个字符,最多18个字符！" />
<div class="passwordStrength">密码强度： <span>弱</span><span>中</span><span class="last">强</span></div>
</td>
<td>
<div class="Validform_checktip"></div>
</td>
</tr>
<tr>
<td class="need">*</td>
<td>确认密码：</td>
<td><input type="password" value="" name="repassword" class="inputxt" recheck="password" datatype="*6-18" 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="重 置" />
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="passwordStrength-min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
tiptype:2,
usePlugin:{
passwordstrength:{
minLen:6,
maxLen:18
}
}
});
})
</script>
</body>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link href="demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>
<body>
<div class="main">
<div class="wraper">
<p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页»</a></p>
<h2 class="green">密码强度提示与验证提示同时显示</h2>
<form class="registerform" action="ajax_post.php" method="post">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">密码：</td>
<td style="width:210px;">
<input type="password" value="" name="password" class="inputxt" plugin="passwordStrength" datatype="*6-18" errormsg="密码至少6个字符,最多18个字符！" />
<div class="passwordStrength">密码强度： <span>弱</span><span>中</span><span class="last">强</span></div>
</td>
<td>
<div class="Validform_checktip"></div>
</td>
</tr>
<tr>
<td class="need">*</td>
<td>确认密码：</td>
<td><input type="password" value="" name="repassword" class="inputxt" recheck="password" datatype="*6-18" 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="重 置" />
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="passwordStrength-min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
tiptype:2,
usePlugin:{
passwordstrength:{
minLen:6,
maxLen:18
}
}
});
})
</script>
</body>
</html>