提交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;
}
}
博客里大都是转载的内容,其目的主要用户知识的组织和管理。

浙公网安备 33010602011771号