页面:
<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">添加新用户</h4>
</div>
<div class="modal-body">
<form id="user-create-modalform" class="form-horizontal" method="post" action="/crud/add">
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="title">Title</label>
</div>
<div class="col-md-7 controls">
<input type="text" id="title" name="title" class="form-control" >
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="email2">邮箱地址</label>
</div>
<div class="col-md-7 controls">
<input type="text" id="email" data-url="/secure/crud/add/check_email" name="email" class="form-control" >
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="nickname2">用户名</label>
</div>
<div class="col-md-7 controls">
<input type="text" id="nickname" name="nickname" data-url="/secure/crud/add/check_nickname" class="form-control" >
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="password">密码</label>
</div>
<div class="col-md-7 controls">
<input type="password" id="password" name="password" class="form-control">
<p class="help-block">5-20位英文、数字、符号,区分大小写</p>
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="confirmPassword">确认密码</label>
</div>
<div class="col-md-7 controls">
<input type="password" id="confirmPassword" name="confirmPassword" class="form-control">
<p class="help-block">再输入一次密码</p>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right" data-toggle="form-submit" data-target="#user-create-modalform">提交</button>
</form>
</div>
</div>
</div>
<script>
require(['controller/secure/crud/modalform2'], function(m){
alert("require");
m.validateForm();
});
</script>
自定义的js (modalform2.js)
define(["jquery", "bootstrap-notify", "jquery-validation"], function($, notify, validation){
var myfun = function() {
alert("myfun");
}
return {
initForm : function() {
alert("initForm");
},
validateForm: function() {
jQuery.validator.setDefaults({
errorElement : 'p',
errorClass : 'help-block',
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error');
},
success : function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement : function(error, element) {
element.parent('div').append(error);
}
});
$("#user-create-modalform").validate({
ignore: [],
rules : {
title : {
required : true,
maxlength : 60
},
email : {
required : true,
email : true,
remote : '/crud/add/check_email'
}
},
messages : {
title : {
required : '标题不能为空',
maxlength : '标题的最大长度不能超过60个字符'
},
email : {
remote : 'Email已存在,balabala'
}
},
submitHandler : function(form) {
//form.submit();
$.post($(form).attr('action'), $(form).serialize(), function(json) {
if(json.status == "success") {
Notify.success("<i class='glyphicon glyphicon-saved'></i> 账号信息设置成功。", 3);
$("#modal").modal('hide');
} else if(json.status == "fail") {
Notify.danger("fail", 3);
} else {
Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 6);
}
}, 'json').fail(function() {
Notify.danger("设置失败,请检查网络", 3);
});
return false;
}
});
}
};
});