标签 bootstrap4 下的文章

bootstrap4 表单验证以ajax的方式提交 非submit表单提交


<div className="row ">
        <div className="col-sm">
          你好:)
        </div>
        <div className="col-sm">
          <div className="shadow p-3 mb-5 bg-white rounded">
          <form id="register_form" method="post" action="/api/register" >
            <div className="form-group">
              <label>Name</label>
              <input type="text" name="name" className="form-control" id="name" required onChange={(event) => SetInputRequestObj(event)}/>
            </div>
            <div className="form-group">
              <label>Email address</label>
              <input type="email" name="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="name@example.com" required onChange={(event) => SetInputRequestObj(event)}/>
              <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div className="form-group">
              <label>Password</label>
              <input type="password" name="passwd" className="form-control" id="exampleInputPassword1" required onChange={(event) => SetInputRequestObj(event)}/>
            </div>
           
            <button type="submit" className="btn btn-primary" onClick={(event) => {subForm() }}>Submit</button>
          </form>
          </div>
        </div>
        
      </div>
function subForm(){
    //阻止默认提交事件
    $("#register_form").submit(function(e){
      e.preventDefault();
    })  

    let valiRes = false; 
    //$('#register_form')是要验证的目标表单
    Array.prototype.filter.call($('#register_form'), function (target) {
      valiRes = target.checkValidity();
    }); 

    //valiRes就是表单验证的结果,返回一个bool值
    if(!valiRes)
      return;//表单验证未通过
    
    // 提交数据
    $.ajax({
      type: "post",
      url: "/api/register",
      data: JSON.stringify(RequestObj),
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function(data){
        
      }
    });
  }

bootstrap4提示框怎么自动关闭


CSS

<style>
    .msg {
      background-color: red;
      width: 30%;
      height: 50%;

      position: absolute;
      left: 100;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;

    }
  </style>

HTML

<!-- 信息提示 -->
  <div class="msg" id='msg'>
  </div>

Js

//消息弹窗
  //str :信息
  //code: 状态;默认为2;  1成功/2信息/3警告/4错误/5首选/6次要的/7深灰色 
  var i = 0
  function msg(str, code) {
    i++;
    var mstStateClass = 'alert alert-success alert-dismissible'
    switch (code) {
      case 1:
        mstStateClass = 'alert alert-info alert-dismissible'
        break;
      case 2:
        mstStateClass = 'alert alert-warning alert-dismissible'
        break;
      case 3:
        mstStateClass = 'alert alert-danger alert-dismissible'
        break;
      case 4:
        mstStateClass = 'alert alert-primary alert-dismissible'
        break;
      case 5:
        mstStateClass = 'alert alert-secondary alert-dismissible'
        break;
      case 6:
        mstStateClass = 'alert alert-dark alert-dismissible'
        break;
      case 7:
        mstStateClass = 'alert alert-light alert-dismissible'
        break;

    }
    var htmlStr = '<div id="msg_id_' + i + '"  class="' + mstStateClass + '"><button type="button" class="close" data-dismiss="alert"></button>' + str + '</div>'
    $("#msg").append(htmlStr)
    removeHtml($("#msg_id_" + i))
  }
  //根据dom删除元素
  function removeHtml(dom) {
    setTimeout(function () {
      dom.slideUp(300, function () {
        dom.remove();
      });
    }, 1 * 1000);//延迟5000
  }

使用

只要在需要的地方调用 msg方法就行~

效果图

Peek 2019-12-08 20-48.gif