页面:
<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>
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; } }); } }; });