<div class="modal fade" id="ajaxForm" tabindex="-1" role="dialog" aria-labelledby="ajaxFormLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="ajaxFormLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">
<form id="defaultForm" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">用户名</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="userName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">密码</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="userPwd" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">手机号码</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="telephone" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">邮箱</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">角色</label>
<div class="col-lg-5">
<select class="form-control" id="jues">
<option value="0" selected>请选择</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-3"></div>
<div class="col-lg-5 text-right">
<button type="submit" class="btn btn-primary">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
引用formValidation.min.js和bootstrap.min.js(带formValidation);
验证
$('#defaultForm')
.formValidation({
message: '您输入的内容无效',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
message: '用户名无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 2,
max: 30,
message: '姓名必须大于2个字小于30个字'
},
remote:{
type:"get",
url:localStorage.getItem("urlBase")+"/user/username",
message:'此用户名已存在!',
delay:2000
}
}
},
userPwd: {
message: '密码格式不正确',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 5,
max: 30,
message: '密码的长度必须大于5'
},
}
},
telephone: {
message: '手机号码无效',
validators: {
regexp: {
regexp: /^1[0-9]{10}$/,
message: '请输入有效的手机号'
}
}
},
email: {
validators: {
emailAddress: {
message: '邮箱地址无效'
}
}
}
}
})
.on('success.form.fv', function (e) {
// Prevent form submission
e.preventDefault();
//zidingyi
js下载地址: