DukeAnn
做一个优雅的程序员

表单使用Validate验证ajax提交表单

今天写登录表单就遇到了这个问题,网上查了一下各种方法都是扯淡没什么用。总是一提交就网页提交表单了。
自己想了一下,直接把提交表单写成方法在方法里面用validate ajax提交表单,将表单的submit按钮绑定一个js方法进行验证和提交
表单

  <form name="loginform" accept-charset="utf-8" id="login_form" class="loginForm">
  <div class="uinArea" id="uinArea">
  <label class="input-tips" for="u">帐号:</label>
  <div class="inputOuter" id="uArea">
  <select name="loginfield" class="choose" id="loginfield">
  <option value="username">用户名</option>
  <option value="email">邮箱号</option>
  <option value="uid">ID账号</option>
  </select>
  <input type="text" id="username" name="username" class="inputstyle"  style="padding-left: 78px"/>
  </div>
  </div>
  <div class="pwdArea" id="pwdArea">
  <label class="input-tips" for="p">密码:</label>
  <div class="inputOuter" id="pArea">
  <input type="password" id="password" name="password" class="inputstyle"/>
  </div>
  </div>
  <label class="auto-login">
  <input type="checkbox" id="automatic-login" name="automatic-login" tabindex="" value="1">
  <span>自动登录</span>
  <a href="">忘记密码?</a>
  </label>
  <div class="clear"></div>
  <div class="login-btn">
  <button type="submit" onclick="subLogin()" class="button_blue"><span style="display: block;width:40px">登 录</span></button>
  </div>
  </form>
function subLogin() {
        $('#username-error').remove();
        $('#login_form').validate({
            debug: true,
            rules: {
                username: {
                    required: true

                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: '请填写用户名'

                },
                password: {
                    required: '请填写密码'
                }
            },
            invalidHandler : function(){
                return false;
            },
            submitHandler : function(form) {  //验证通过后的执行方法
                var username = $('#username').val();
                var password = $('#password').val();
                var autologin = $('#automatic-login').val();
                var loginfield = $('#loginfield').val();

                $.ajax({
                    url: 'login.pphp',
                    type : "post",
                    data: {
                        username: username,
                        password: password,
                        autologin: autologin,
                        loginfield: loginfield
                    },
                    dataType : "json",
                    success : function(result) {
                        if (result.state == 0) {
                            $('#username').after(''+ result.msg +'')
                        }
                    }
                });
                return false;
            }
        })
    }
DukeAnn的笔记本:DukeAnn的博客 » 表单使用Validate验证ajax提交表单
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址