一个模态框 和校验部分,但是校验显示不出来,bootstrap导入了
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">用户添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="addemp1" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nameId" name="name" placeholder="请输入姓名">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender1" value="M"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2" value="F"> 女
</label>
</div>
<div class="form-group">
<div class="form-group">
<label class="col-sm-2 control-label">年龄</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="age" placeholder="请输入年龄">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="emailId" placeholder="email@123">
<span class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="btn_save" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//校验表单数据
function validate_add_form(){
//1、拿到要校验的数据,使用正则表达式
var Name = $("#nameId").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(Name)){
show_validate_msg("#nameId", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
return false;
}else{
show_validate_msg("#nameId", "success", "");
}
//2、校验邮箱信息
var email = $("#emailId").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
show_validate_msg("#emailId", "error", "邮箱格式不正确");
return false;
}else{
show_validate_msg("#emailId", "success", "");
}
return true;
}
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if("success"==status){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error" == status){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
//保存按钮的单击事件
$("#btn_save").click(function() {
$.ajax({
url:"${basePath}/addemp",
type:"post",
dataType:"json",
//.serialize() 当提交多条表单数据时,我们可以采用当表单进行序列化的方式简化原有的操作
data: $("#myModal form").serialize(),
success:function (result) {
alert(result.msg);
//保存完成后关闭模态框
$('#myModal').modal('hide')
}
});
});
</script>