书城项目第一阶段

最新推荐文章于 2023-06-04 21:53:46 发布

Kaystart丶

最新推荐文章于 2023-06-04 21:53:46 发布

阅读量223

点赞数

文章标签： vue js html

本文链接：https://blog.csdn.net/m0_48773766/article/details/118227505

版权

书城项目第一阶段

登录（用户名、密码非空验证）

JS代码

<script type="text/javascript" src="../../static/script/vue_v2.6.14.js"></script>
<script type="text/javascript">
    new Vue({
      el:"#app",
      data:{
        "username":"",
        "psd":"",
        "erroMsg":"请输入用户名和密码"
      },
      methods:{
        checklog() {
          this.erroMsg = "请输入用户名和密码";
          if (this.psd == "") {
            this.erroMsg = "密码为空！";
            event.preventDefault();
          }
          if (this.username == "") {
            this.erroMsg = "用户名为空！";
            event.preventDefault();
          }
        }
      }
    });
</script>

HTML代码

<body>
  <div id="app">
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>尚硅谷会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <span class="errorMsg">{{erroMsg}}</span>
            </div>
            <div class="form">
              <form action="login_success.html">
                <label>用户名称：</label>
                <input
                  class="itxt"
                  type="text"
                  placeholder="请输入用户名"
                  autocomplete="off"
                  tabindex="1"
                  name="username"
                  id="username"
                  v-model="username"
                />
                <br />
                <br />
                <label>用户密码：</label>
                <input
                  class="itxt"
                  type="password"
                  placeholder="请输入密码"
                  autocomplete="off"
                  tabindex="1"
                  name="password"
                  id="password"
                  v-model="psd"
                />
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" @click="checklog"/>
              </form>
              <div class="tit">
                <a href="regist.html">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </div>
  </body>

注册（用户名、密码、邮箱、验证以及数据不符阻塞）

JS代码

<script src="../../static/script/vue_v2.6.14.js" type="text/javascript"></script>
<script type="text/javascript">
  new Vue({
    el:"#app",
    data:{
      // 双向绑定
      "username":"",
      "psd":"",
      "compsd":"",
      "mail":"",
      // 动态绑定表格样式
      "userVv":false,
      "psdVv":false,
      "comVv":false,
      "mailVv":false
    },
    methods: {
      ckusername() {
        this.userVv = false;
        var reguser = /^\w{6,12}$/;
        if (!reguser.test(this.username)) {
          this.userVv = true;
          event.preventDefault();
        }
      },

      ckpsd() {
        this.psdVv = false;
        var regpsd = /^[0-9]{6}$/;
        if (!regpsd.test(this.psd)) {
          this.psdVv = true;
          event.preventDefault();
        }
      },

      ckcompsd() {
        this.comVv = false;
        if (!this.psd == this.compsd) {
          this.comVv = true;
          event.preventDefault();
        }
      },


      ckmail() {
        this.mailVv = false;
        var regmail = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (!regmail.test(this.mail)) {
          this.mailVv = true;
          event.preventDefault();
        }
      },

      cksubmit() {
        this.ckusername();
        this.ckpsd();
        this.ckcompsd();
        this.ckmail();
      }
    }
  });

</script>

HTML代码

 <body>
  <div id="app">
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form action="regist_success.html">
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input type="text" placeholder="请输入用户名" name="username" v-model="username" @blur="ckusername"/>
            </div>
            <span class="errMess" :class="{visible:userVv}">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;用户名:6位【字母数字下划线】</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input type="password" placeholder="请输入密码" v-model="psd" name="password" @blur="ckpsd"/>
            </div>
            <span class="errMess" :class="{visible:psdVv}">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;密码为6位数字</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input type="password" placeholder="请输入确认密码" v-model="compsd" @blur="ckcompsd" />
            </div>
            <span class="errMess" :class="{visible:comVv}">密码两次输入不一致</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input type="text" placeholder="请输入邮箱" name="email" v-model="mail" @blur="ckmail"/>
            </div>
            <span class="errMess":class="{visible:mailVv}" >请输入正确的邮箱格式</span>
          </div>
          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" placeholder="" />
                <img src="../../static/img/code.bmp" alt="" />
              </div>
            </div>
            <span class="errMess">请输入正确的验证码</span>
          </div>
          <button class="btn" @click="cksubmit">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </div>
  </body>

效果
在这里插入图片描述

Kaystart丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
书城项目第一阶段

书城项目第一阶段登录（用户名、密码非空验证）JS代码<script type="text/javascript" src="../../static/script/vue_v2.6.14.js"></script><script type="text/javascript"> new Vue({ el:"#app", data:{ "username":"", "psd":"", "
复制链接

扫一扫