提交from 表单之前做其他的操作

再做html页面的时候有这样的需求:

1、注册,点击提交表单后,先对注册的信息进行验证,符合规则之后再提交

2、登陆,点击登陆之后,如果服务器返回登录成功后,页面再进行调整

实现一的方法:

    <form action="index.html" method="post" onsubmit="return check()">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="登陆名" name="loginName" id="loginName">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="用户名" name="userName" id="userName">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="密码" name="password" id="password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="确认密码" id="confirmPassword">
        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
        </div>
      </div>

function check(){
	var loginName = $("#loginName").val();
	var username = $("#userName").val();
	
	if(loginName == ""){
		alert("登陆名不能为空");
		return false;
	}else if(password == "" || password.length <= 6){
		alert("密码必须大于6位,并且以字母或下划线开头!");
		return false;
	}else if(password != confirmPassword){
		alert("输入的密码不一致");
		return false;
	}
	return true;
}

onsubmit指定的方法返回true,则提交数据;返回false不提交数据

实现二的方法,使用ajax异步提交数据:

<form action="<?php echo  'http://'.rootUrl?>" method="post" id="submitData" onsubmit="return submitInfo();">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="用户名或邮箱" name="username" id="username">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="密码" name="password" id="password">
          <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
</div>

//提交登录信息
function submitInfo(){
	var loginName = $("#username").val();
	var password = $("#password").val();
	if(password == "" || loginName == ""){
		alert("用户名或密码不能为空");
		return false;
	}else{
		password = md5(password);
		$.ajax({
			url:"http://" + host + path + "index.php/UserCenter/loginReq",
			type:"post",
			data:{loginName:loginName,password:password},
			success:function(result){
				var obj = JSON.parse(result);
				var status = obj.status;
				var token = obj.token;
	        		if(status == 200){
	        			$.cookie('token', token,{path:cookiePath,expires:1});
	        			window.location.href=url;    //url 来自param.js 文件
		        	}else{
			        	alert("用户名或密码错误!");
		        		return false;
			    }
	    		}
	    });
		return false;
	}
}

  

  

posted @ 2017-12-13 15:38  远洪  阅读(741)  评论(0)    收藏  举报