HTML+jQuery表单操作

阻止表单提交

DOCTYPE html>



    
    用户登录
    
    



    
        
            willem - 博客管理员登录
            
                
                    
                        邮件
                        
                    
                    
                        密码
                        
                    
                    登录
                
            
            
        
    
    
    
    
        // 为表单添加提交事件
        $('#loginForm').on('submit',function(){

            // 阻止表单默认提交
            return false;
        });
    

三秒后跳转

setTimeout(function(){
	location.href="/admin/login";
},3000);

获取提交表单数据

// 获取表单对象的公共方法
function serializeToJson(form){
    var result = {};
    // 获取到的格式[{name:'email',value:'用户输入的内容'}]
    var f = form.serializeArray();
    // {email:'zhwangsan@qq.com',password:'123456'} 转换成这种格式
    f.forEach(function(item){
        // item.name 相当于 result.email
        result[item.name] = item.value;
    });
    return result;
}

 
 
     // 为表单添加提交事件
     $('#loginForm').on('submit',function(){
         // 获取表单中用户输入的内容
         var result = serializeToJson($(this));//传入表单对象
         console.log(result);
         // 如果用户没有输入邮寄地址
         if(result.email.trim().length == 0)
         {
             alert("请输入邮寄地址");
             return false;
         }
         if(result.password.trim().length == 0)
         {
             alert("请输入密码");
             return false;
         }

     });