筑坐极_ajax的注册

失败效果

ajax的注册

1 外部链接

<!--禁止缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0 ">
<title>注册页</title>
<!--图标-->
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>

2 HTML部分

<div class="row">

  <div class="d-none d-sm-block col-sm-2 col-md-2 col-lg-4"></div>
  <div class="d-none d-lg-block col-lg-4"></div>
  <div class="col-xs-12 col-sm-8 col-md-8  col-lg-4 p-5">

    <h2 class="mb-5 mt-2 text-center">注册登录</h2>

    <form action="#">

      <div class="mb-3">
        <!-- unBlur(this.value) -->
        <input type="text" class="form-control" placeholder="账号" id="un" onblur="ubb()">
      </div>

      <div class="mb-3">
        <!-- unBlur(this.value) -->
        <input type="text" class="form-control" placeholder="昵称" id="unn" onblur="ubb()">
      </div>

      <div class="mb-3">
        <input type="password" class="form-control" placeholder="密码" id="pww" onblur="ubb()">
      </div>

      <div class="mb-3">
        <input type="password" class="form-control" placeholder="确认密码" id="pw" onblur="ubb()">
      </div>

      <div class="mb-1 hide error-block ">
        <p id="error-msg" style="color: red;"></p>
      </div>

      <div class="mb-2  text-center">
        <button type="button" class="btn btn-success" style="width: 100%" onclick="sub()">登录
        </button>
      </div>

    </form>


  </div>


</div>

</div>

3 js部分

<script>
  function ubb() {
    let un=$("#un").val();
    let unn= $("#unn").val();
    let pww=$("#pww").val();
    let pw=$("#pw").val();
    if (un.length===0||pww.length===0||unn.length===0||pw.length===0){
      $("#error-msg").text("邮箱或昵称或密码不能为空");
      return false
    } else{
      $("#error-msg").text("");
      return true
    }
   }

  function sub() {

    if (ubb()===false)return;//如果ubb是错误返回前面

    let un= $("#un").val();
    let unn= $("#unn").val();
    let pww=$("#pww").val();
    let pw=$("#pw").val();
    if (pww !== pw) {
      $("#error-msg").text("四个输入框不能为空");
      return false}

    // 准备好后端的接口地址
    let loginUrl = "https://zhuzuoji.com/myapi/employee/register";
    // 准备好后端接口需要的参数
    let mouse={
      key:"vv9544",
      email:un,
      name:unn,
      password:pw,
      password_confirm:pww
    };
    $.ajax({
      url:loginUrl,
      data:mouse,
      type:"post",
      success:function (result) {
         result=JSON.parse(result);
        if (result.status===1){
          console.log("登录成功")
          // 成功以后跳转主页
          window.location.href = "http://www.mobanwang.com/";
        } else{
          $("#error-msg").text(result.msg);
        }
      }
    })
  }

4 js的另一种写法

function ubb() {
  //js
  let un=document.getElementById("un").value;
  let unn=document.getElementById("unn").value;
  let pw=document.getElementById("pw").value;
  let pww=document.getElementById("pww").value;

  //去空格
  un = un.replace(/\s/g,"");
  unn=unn.replace(/\s/g,"");
  pw=pw.replace(/\s/g,"");
  pww=pww.replace(/\s/g,"");

  //判断是否为空
  if (!un.length||!unn.length||!pw.length||!pww.length){
    document.getElementById("error-msg").innerText="四个输入框都为必须填项";
    return false;
  }

if (unn.length<4) {
  document.getElementById("error-msg").innerText = "至少是4个字昵称";
  return false;
}

  let emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (!emailReg.test(un)) {
    document.getElementById("error-msg").innerText = "请输入正确的邮箱地址~";
    return false;
  }

  let pwReg = /^[0-9a-zA-Z]{6,15}$/;
  if (!pwReg.test(pw)) {
    document.getElementById("error-msg").innerText = "密码只能包含字母或数字,长度为6-15~";
    return false;
  }
if (pw!==pww){
  document.getElementById("erroe-msg").innerText="两次密码不一致";
  return false;
}
document.getElementById("error-msg").innerText="";
return true;

}

function sub() {
  let all=ubb();
  if (all===false)return;

  let un=$("#un").val();
  let pw=$("#pw").val();
  let unn=$("#unn").val();
  let pww=$("#pww").val();

  // 准备好后端的接口地址
  let loginUrl = "https://zhuzuoji.com/myapi/employee/register";
  // 准备好后端接口需要的参数
  let mouse={
    key:"vv9544",
    email:un,
    name:unn,
    password:pw,
    password_confirm:pww
  };
  $.ajax({
    url:loginUrl,
    data:mouse,
    type:"post",
    success:function (result) {
      result=JSON.parse(result);
      if (result.state===1){
        console.log("登录成功")
        // 成功以后跳转主页
        $("#error-msg").text("注册成功,快去登录吧");
        //window.location.href = "http://www.mobanwang.com/";
      } else{
        $("#error-msg").text("注册失败:"+result.msg);
      }
    }
  })
}

ajax的注册

苏林*

ajax的注册

ajax的注册

2021.09.06

724人

苏林*

天津市大港区

Hot:13949

苏林*

当前作品暂无评分

还未获得评语哦~