注:类似js中的默认弹框alert,样式更加美化
sweetalert下载链接:http://t4t5.github.io/sweetalert/
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/assets/css/sweetalert.css" />
<title>reg</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style>
body{width:100%}
div{margin:0 auto;line-height:30px;}
div span{float:left;width:100px;}
div input{float:left;width:100px;}
</style>
</head>
<body>
<div>
<span >昵称:</span><input type="text" id="name" /><br/>
<span>邮箱:</span><input type="text" id="email" /><br/>
<span>手机:</span><input type="text" id="mobile" /><br/>
<span>密码:</span><input type="password" id="pwd" /><br/>
<span>确认密码:</span><input type="password" id="cmpwd" /><br/>
<input style="margin-left:100px;" type="button" value="submit" onclick="check()" /><br/>
</div>
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/sweetalert-dev.js"></script>
<script type="text/javascript">
function check()
{
var name = $.trim($('#name').val());
var email = $.trim($('#email').val());
var mobile = $.trim($('#mobile').val());
var pwd = $.trim($('#pwd').val());
var cmpwd = $.trim($('#cmpwd').val());
var emailTest = /^[a-z0-9]([a-z0-9]*[-_\.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;
var mobileTest = /^(((13[0-9]{1})|14[0-9]{1}|15[0-9]{1}|18[0-9]{1}|17[0-9]{1})\d{8})$/;
var usernameTest = /^[\u4e00-\u9fa5A-Za-z0-9_]+$/;
if(name.length<1){
swal('请填写用户名');
return false;
}
if(!usernameTest.test(name)){
swal('昵称为汉字、字母、数字、下滑线');
return false;
}
if(email.length<1){
swal('请填写邮箱');
return false;
}
if(!emailTest.test(email)){
swal('邮箱格式不正确');
return false;
}
if(mobile.length<1){
swal('请填写手机');
return false;
}
if(!mobileTest.test(mobile)){
swal('手机格式不正确');
return false;
}
if(pwd.length<1){
swal('请填写密码');
return false;
}
if(pwd.length>0&&pwd.length<6){
swal('密码不少于6位数');
return false;
}
if(cmpwd.length<1){
swal('请填写确认密码');
return false;
}
if(pwd!=cmpwd){
swal('确认密码与密码不一致');
return false;
}
var data = {
name:name,
email:email,
mobile:mobile,
pwd:pwd
};
$.post('/test/reg',data,function(data){
if(data.success){
swal('注册成功');
}else{
swal(data.msg);
return false;
}
},'json');
}
</script>
</body>
</html>
示例效果图如下: