sweetalert弹框使用

注：类似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>

示例效果图如下：
这里写图片描述

版权声明：本文为kirsten_z原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。