<!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表单验证提示插件</title>
<style>
dl dt,dl dd{
display: inline-block;
}
input{
height: 30px;
line-height: 30px;
padding: 0 10px;
}
textarea{
resize: none;
width: 120px;
line-height: 30px;
padding: 0 10px;
height: 120px;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<form action="" method="post" autocomplete="off" data-form="ajax">
<dl>
<dt>必填验证</dt>
<dd>
<input type="text" name="req">
</dd>
</dl>
<dl>
<dt>最小数字</dt>
<dd>
<input type="text" name="min_number">
</dd>
</dl>
<dl>
<dt>最大数字</dt>
<dd>
<input type="text" name="max_number" id="eq">
</dd>
</dl>
<dl>
<dt>相等比较</dt>
<dd>
<input type="text" name="eq">
</dd>
</dl>
<dl>
<dt>最小长度</dt>
<dd>
<input type="text" name="min_length">
</dd>
</dl>
<dl>
<dt>最大长度</dt>
<dd>
<input type="text" name="max_length">
</dd>
</dl>
<dl>
<dt>正则验证</dt>
<dd>
<input type="password" name="rule">
</dd>
</dl>
<dl>
<dt>手机/电话验证</dt>
<dd>
<input type="text" name="mobile">
</dd>
</dl>
<dl>
<dt>邮箱验证</dt>
<dd>
<input type="text" name="email" data-email="true">
</dd>
</dl>
<dl>
<dt>身份证验证</dt>
<dd>
<input type="text" name="email" data-idcard="true">
</dd>
</dl>
<button>提交代码</button>
</form>
</body>
<script src="asset/verJs.js"></script>
<script>
var form = new VerJs();
form.init({
form:"form",//验证的表单
//验证数据集，也可以在标记中以data-XXX的形式加入验证
data:{
req:{
required:true
},
min_number:{
min:2
},
max_number:{
max:12
},
eq:{
equal:"#eq"
},
min_length:{
minlength:6
},
max_length:{
maxlength:6
},
rule:{
rule:"^\\d{6}$",
required:true
},
mobile:{
mobile:true
}
},
//验证提示消息
message:{
req:{
required:"这是一条必填数据"
},
rule:{
rule:"请输入六位数字"
}
},
success:function (data) {
//ajax提交成功后的回调函数
alert("hahahha");
},
fail:function (data) {
//ajax提交失败后的回调函数
alert("ieieiiruwei");
}
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</html>
简单实用的VerJs表单验证提示插件.zip
版权申诉
196 浏览量
2023-09-26
01:46:48
上传
评论
收藏 10KB ZIP 举报
简单实用的VerJs表单验证提示插件.zip （4个子文件） 
asset 
verJs.js 13KB need common.css 1KB vericon.css 6KB
index.html 4KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
