JavaWeb 期末大作业 管理系统 登录表单 Parsley

使用 Parsley 作为校验框架。

<form id="form" data-parsley-validate="">  
  <div class="form-group">  
    <label for="username">用户名</label>  
    <input type="text" class="form-control" id="username" placeholder="请输入您的用户名" required="">  
  </div>  
  
  <div class="form-group">  
    <label for="password">密码</label>  
    <input type="email" class="form-control" id="password" placeholder="请输入您的密码" data-parsley-trigger="change" required="">  
  </div>  
  
  <div class="form-group">  
    <label for="captcha">验证码</label>  
    <div class="row">  
      <div class="col-xs-7">  
        <input type="text" name="captcha" id="captcha" class="form-control" placeholder="验证码" required="" data-parsley-trigger="change"  maxlength="6" minlength="6" >  
      </div>  
      <div class="col-xs-5" style="display: flex; justify-content: space-around;">  
        <img src="login_files/captcha.png" class="pull-left" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">  
        <button class="btn btn-primary" type="reset">重置</button>  
      </div>  
    </div>  
  </div>  
    <div class="form-group">  
    <label class="checkbox checkbox-primary m-t-10">  
      <input type="checkbox" checked="checked"><span>5天内自动登录</span>  
    </label>  
  </div>  
  
  <div class="form-group">  
    <button class="btn btn-block btn-primary" type="submit" value="validate">立即登录</button>  
  </div>  
  <footer class="text-center">  
    <p class="m-b-0">Copyright © 2023 Aze. All right reserved</p>  
  </footer>  
</form>

之后加一个js代码：

<script>  
  $('#form').parsley().on('field:validated', function() {  
    var ok = $('.parsley-error').length === 0;  
    if(ok)  
      console.log("校验通过")  
    else  
      console.log("校验不通过")  
  }).on('form:submit', function() {  
    return false; // Don't submit form for this demo  
  });  
</script>

这样基本的框架就搭好了