<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<div class="modal-dialog" style="width: 860px;"><!-- BEGIN modal-dialog -->
    <div class="modal-content"><!-- BEGIN modal-content -->
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">新增短信接收人</h4>
        </div>
        <form action="system/sms/addSmsReceiver.do" id="form_receiver_tables" method="post"><!-- BEGIN FORM -->
            <!-- <input name="userId" id="userId" type="hidden" value=""> -->
            <div class="modal-body">
                <div class="row form-group">
                    <div class="col-sm-2">
                        <label class="span">接收人姓名</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="receiverName" id="receiverName" type="text" class="form-control" placeholder="请输入接收人姓名" value="${receiver.receiverName}">
                    </div>
                    <div class="col-sm-2">
                        <label class="span">接收人手机号</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="receiverMobile" id="receiverMobile" type="text" class="form-control" placeholder="请输入接收人手机号" value="${receiver.receiverMobile}">
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-2">
                        <label class="span">备注</label>
                    </div>
                    <div class="col-sm-4">
                        <input name="memo" id="memo" type="text" class="form-control" placeholder="请输入备注" value="${receiver.memo}">
                    </div>
                    <div class="col-sm-2">
                        <label class="span"></label>
                    </div>
                    <div class="col-sm-4">
                    </div>
                </div>
            </div>
            <div class="modal-footer clearfix">
                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>取消</button>
                <button type="submit" class="btn btn-primary pull-left"><i class="fa fa-envelope"></i>确定</button>
            </div>
        </form><!-- END FORM -->
    </div><!-- END modal-content -->
</div><!-- END modal-dialog -->
<script type="text/javascript">
    $(function() {
        // 验证表单
        var form = $('#form_receiver_tables');

        //检查登录名是否符合规范
        var customError = '';
        jQuery.validator.addMethod("checkReceiverMobile", function(value, element) {
            var returnVal = true;
            if(this.optional(element) || /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)){
                return true;
            } else {
                customError='接收人手机号格式错误';
                returnVal = false;
            }
            jQuery.validator.messages.checkReceiverMobile = customError;
            return returnVal;
        }, customError);

        // 异步检测手机号是否已存在
        jQuery.validator.addMethod("doCheckReceiverMobile", function(value, element) {
            var t = new Date();
            var result = "false";
            $.ajax({
                type: "POST",
                async: false,
                url: "system/sms/checkReceiverMobile.jhtml",
                data: {receiverMobile:value, t:t},
                dataType: "text",
                success: function(res){
                    if(res == "true") result = "true";
                }
            });
            return this.optional(element) || (result == "true");
        }, "手机号已存在!");

        form.validate({
            errorElement: 'span',errorClass: 'help-inline',focusInvalid: false,ignore: "",
            rules: {receiverName:{required: true,maxlength:10},
                receiverMobile: {required: true,minlength:11,maxlength:11,doCheckReceiverMobile:true,checkReceiverMobile:true}
            },
            messages:{receiverName:{required: "请输入接收人姓名!", maxlength:"接收人姓名最大长度为10"},
                receiverMobile:{required:"请输入接收人手机号!", minlength:"接收人手机号最小长度为11", maxlength:"接收人手机号最大长度为11", remote:"手机号已存在!"}
            },
            highlight: function (element) {
                $(element).closest('.help-inline').removeClass('ok');
                $(element).closest('.control-group').removeClass('success').addClass('error');
            },
            unhighlight: function (element) {
                $(element).closest('.control-group').removeClass('error');
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
    });
</script>