<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<title>verJs.js表单验证插件 - 【更多源码：www.96flw.com】</title>
<style>
fieldset{
border: 0;
}
dl dt,dl dd{
display: inline-block;
vertical-align: top;
}
input{
height: 30px;
line-height: 30px;
width: 220px;
outline: none;
padding: 0 10px;
}
dl{
margin-bottom: 15px;
}
button{
width: 120px;
height: 35px;
border: 0;
background: #0a8cd2;
color: #fff;
}
</style>
</head>
<body>
<form action="#" id="form" data-form="ajax">
<fieldset>
<div>form表单验证</div>
<dl>
<dt>密码</dt>
<dd>
<input type="text" data-required="参数不能为空" id="eq">
</dd>
</dl>
<dl>
<dt>确认密码</dt>
<dd>
<input type="text" data-equal="#eq" data-required="参数不能为空">
</dd>
</dl>
<dl>
<dt>最小/大值</dt>
<dd>
<input type="number" data-min="7" data-max="15">
</dd>
</dl>
<dl>
<dt>最小/大长度</dt>
<dd>
<input type="text" data-minlength="5" data-maxlength="15">
</dd>
</dl>
<dl>
<dt>手机</dt>
<dd>
<input type="text" data-mobile="true">
</dd>
</dl>
<dl>
<dt>邮箱</dt>
<dd>
<input type="text" data-email="true">
</dd>
</dl>
<dl>
<dt>身份证</dt>
<dd>
<input type="text" data-idcard="true">
</dd>
</dl>
<dl>
<dt>气泡+正则</dt>
<dd>
<input type="text" data-rule="^[A-Za-z]\w{5,11}$" data-rule-message="请输入6~12字符，以字母开头" data-required="请输入6~12字符，以字母开头" data-block="true">
</dd>
</dl>
<button type="submit">提交</button>
</fieldset>
</form>
<script src="verJs/verJs.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
function max_width() {
var max = 0;
$("dt").each(function () {
max = Math.max(max,$(this).width());
});
$("dt").width(max);
}
max_width();
new VerJs({
form:"#form",
success:function (d) {
alert(1)
},
fail:function (d) {
alert(2)
}
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
