笔记：表单验证以及sweetalert中swal的使用

1.表单验证jsp页面表单样例

<div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-user"></span></span>
    <input type="text" class="form-control" id="userName" name="userName"
           placeholder="请输入名字" aria-describedby="sizing-addon1" required>
</div>
<span id="user"></span>

• input中required设置必填字段；
• 用到字体图标glyphicon glyphicon-user;
• bootstrap的表单组件input-group

2.表单用户名验证javascript代码

//用户名校验
            $("#userName").focus(function () {
                //聚焦，输入值
                $("#user").html("用户名必须大于等于两个长度");
                $("#user").css({color: "green"});
            });
            $("#userName").blur(function () {
            	//失去焦点，值改变
                var username = $(this).val();
                if (username.length < 2) {
                	//判断输入值是否符合条件
                    $("#user").html("");
                    $("#user").html("用户名不合法");
                    $("#user").css({color: "red"});
                    flag = false;
                } else {
                    $("#user").html("");
                    $("#user").html("用户名合法");
                    $("#user").css({color: "green"});
                    num = num + 1;
                    flag = true;
                }
            });

3.邮箱验证正则表达式；

//邮箱正则表达式
var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
var email = $(this).val();
if (!reg.test(email)) { //正则验证不通过，格式不对
    flag = false;
    $("#emaila").html("");
    $("#emaila").html("邮箱格式不正确");
    $("#emaila").css({color: "red"});
} else {
    $("#emaila").html("");
    $("#emaila").html("邮箱格式正确");
    $("#emaila").css({color: "green"});
    num = num + 1;
    flag = true;
}

4.sweetalert中swal的使用

1.首先导入js，css

<link rel="stylesheet" href="css/sweetalert/sweetalert.css">
<script src="js/jquery-2.2.4.js"></script>
<script src="css/sweetalert/sweetalert.min.js"></script>

2.绑定点击事件

$(".buy").click(function () {

/*swal组件*/

})

3.swal格式

swal({
    title: "Are you sure?",
    text: "请确认是否开通会员!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, 去支付!",
    cancelButtonText: "No, 不开通!",
    closeOnConfirm: false,
    closeOnCancel: false
}, function (isConfirm) {
    if (isConfirm) {
        swal("确认", "你点击了确认按钮 :)", "error");
    } else {
        swal("取消", "你点击了取消按钮！ :)", "error");
    }
});

• 完全格式的swal有确认取消按钮以及回调函数；
• 简单版的swal只有一个提示功能；