创建时间：2017-12-13
常用的表单正则验证，弹层提示
阿里云盘资源
网盘资源搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/static/vendor/layui/css/layui.css" />
<style>
.box{width:380px;}
.title{margin-bottom: 5px;}
.box form>div{margin-bottom: 20px;}
.box .layui-btn{width: 100%;}
.tips-box{padding: 20px 0;display: none;}
.tips-box p{text-align: center;letter-spacing: 1px;color:#D29F5D;line-height: 23px;}
</style>
</head>
<body>
<div class="box">
<form action="" class='layui-form'>
<div><div class='title'>昵称：</div><input type="text" class='layui-input' name='user'></div>
<div><div class='title'>手机：</div><input type="text" class='layui-input' name='phone'></div>
<div><div class='title'>密码：</div><input type="password" class='layui-input' name='pass'></div>
<div><div class='title'>邮箱：</div><input type="text" class='layui-input' name='email'></div>
<div><div class='title'>身份证：</div><input type="text" class='layui-input' name='id'></div>
<div><button class="layui-btn" lay-submit lay-filter="formDemo">提交</button></div>
</form>
</div>
<div class='tips-box'>
<p></p>
</div>
<iframe src="http://www.520anan.com/pc/page/form" frameborder="0"></iframe>
<script type="text/javascript" src="/static/home/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/static/vendor/layui/layui.js"></script>
<script>
var regPhone = /^1[3584]\d{9}$/; //检测手机号的正则，匹配 以1开头,第二位为3584,只能包含数字，长度11位
var regPass = /^[0-9a-zA-Z]{6,18}$/;//密码规则：6-18位字母数字组合
var regID = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;//身份证号(15位、18位数字)
var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱
var layer = layui.use('layer');//加载弹层
layui.use('form', function () {
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function (data) {
var bool = true;
if (data.field.user == '') {
bool = false;
layerTips('姓名输入有误');
return false;
}
if (!regPhone.test(data.field.phone)) {
bool = false;
layerTips('手机号码输入有误');
return false;
}
if (!regPass.test(data.field.pass)) {
bool = false;
layerTips('密码输入有误');
return false;
}
if (!regEmail.test(data.field.email)) {
bool = false;
layerTips('邮箱输入有误');
return false;
}
if (!regID.test(data.field.id)) {
bool = false;
layerTips('身份证输入有误');
return false;
}
if (bool) {
$.post('{:url("url")}', data.field, function (msg) {
if (msg.code == 1) {
layerTips('注册成功<br/>3秒后返回登录页面');
setInterval(function () {
location.replace(location.href);//刷新本页面
// window.location.href = '/pc/member/index';//页面跳转
}, 3000);
} else {
layerTips(msg.msg);
}
}, 'json');
}
console.log(bool)
return false;
});
})
/**
*通用提示弹框
* @param msg 提示信息
* @param reset 是否重置表单 ture重置表单 false不重置
* @param fun 函数
*/
function layerTips(msg, reset, fun) {
$(".tips-box p").html(msg);
//页面层-自定义
indexTips = layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
area: '80%', //宽高
skin: 'yourclass',
content: $('.tips-box')
});
if (reset == true) {
setTimeout(function () {
window.location.reload();
}, 1000);
//重置表单
}
//判断函数是否存在
if (typeof fun == "function") {
fun();
}
}
</script>
</body>
</html>