require.js 模态框上利用defind加载js


页面:

<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;
                }
              });  
            
            
        }
    };
});



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值