insight-plugin-verifier
Version:
Insight-verifier
132 lines (129 loc) • 5.59 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="robots" content="all"/>
<meta name="author" content="RZccccccc"/>
<meta name="Copyright" content="Insight"/>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
<title>表单验证插件测试</title>
<link href="css/common.css" rel="stylesheet"/>
<style>
body{
background-color: blanchedalmond;
}
.verifier{
width: 720px;
margin-left: 50px;
}
.verifier .inpt{
width: 100%;
margin-top: 20px;
font-weight: bold;
}
.verifier input{
outline: none;
width: 300px;
height: 30px;
padding-left: 15px;
border: 1px solid #000000;
}
.verifier .yan{
padding: 5px;
vertical-align: middle;
font-size: 26px;
text-align: center;
margin: 30px 0 0 30px;
line-height: 60px;
cursor: pointer;
background-color: pink;
color: black;
}
</style>
<!-- 页面设计：cp | 页面制作：cp | 创建：2018-12-13 -->
<script>
var defaultFontSize = 0;
(function(){
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
var _cWidth = innerWidth;
var _cHeight = innerHeight;
var delayAdapterTimer;
var adapterLinstener = setInterval(function(){
if(_cWidth == innerWidth || _cHeight == innerHeight ){
return;
}else{
_cWidth = innerWidth;
_cHeight = innerHeight;
}
clearTimeout(delayAdapterTimer);
delayAdapterTimer = setTimeout(function(){
resize();
}, 80);
},80);
resize(true);
function resize(bol) {
var html = document.documentElement;
var designWidth = 750;
var rem2px = 100;
document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
if(typeof adapterChatroom == "function") adapterChatroom();
}
})();
</script>
</head>
<body>
<div class="verifier">
<div class="inpt"><span>非空验证：</span><input type="text" class="empty"><span class="yan">验证</span></div>
<div class="inpt"><span>邮箱格式验证：</span><input type="text" class="email"><span class="yan">验证</span></div>
<div class="inpt"><span>号码格式验证：</span><input type="text" class="phone"><span class="yan">验证</span></div>
<div class="inpt"><span>身份证格式验证：</span><input type="text" class="credit"><span class="yan">验证</span></div>
<div class="inpt"><span>验证类型：(0:字母或者数字均可(默认);1:只能输入数字;2:只能输入字母;)</span><input type="text" class="acctype"><br/><span>账号验证：</span><input type="text" class="account"><span class="yan">验证</span></div>
<div class="inpt"><br/><span>长度：(输入数组如：[1,2] )</span><input type="text" class="area"><br/><span>长度限制：</span><input type="text" class="length"><span class="yan">验证</span></div>
<div class="inpt"><span>禁止的词语：(输入数组如：["啊",2] )</span><input type="text" class="forbid"><br/><span>替换词：</span><input type="text" class="tihuan"><br/><span>内容：</span><input type="text" class="content"><span class="yan">验证</span></div>
</div>
<div style="margin: 50px 0 0 50px;border: 1px solid #000000;width: 600px;">
<span style="font-size:30px;font-weight: bold;">结果：</span>
<div class="final" style="font-size:24px;color:red;"></div>
</div>
</body>
<script src="js/zepto.js"></script>
<script src="http://h5.intech.gdinsight.com/plugin/verifier.js"></script>
<script>
var verifier = new Verifier();
var value;
$(".yan").click(function(){
value = $(this).prev().val()
if($(this).prev().attr("class") == "empty"){
//非空验证
var result = verifier.empty(value);
}else if($(this).prev().attr("class") == "email"){
//邮箱验证
var result = verifier.email(value);
}else if($(this).prev().attr("class") == "phone"){
//手机验证
var result = verifier.phone(value);
}else if($(this).prev().attr("class") == "credit"){
//身份证验证
var result = verifier.credit(value);
}else if($(this).prev().attr("class") == "account"){
//账号验证(参数二 0:字母或者数字均可(默认);1:只能输入数字;2:只能输入字母;)
var result = verifier.account(value,$(".acctype").val());
}else if($(this).prev().attr("class") == "length"){
//长度验证(参数二:长度区间数组)
var result = verifier.length(value,JSON.parse($(".area").val()));
}else if($(this).prev().attr("class") == "content"){
//内容验证(参数二:违禁词数组，不传值则不验证违禁词;参数三:把违禁词替换为参数内容)
var result = verifier.content(value,JSON.parse($(".forbid").val()),$(".tihuan").val());
}
console.log(result)
$(".final").html(JSON.stringify(result));
})
</script>
</html>