Question

关于button中a标签执行javascript和form顺序的问题

未输入用户名和密码的情况下，点击登录测试结果如下:

1.ie,点击登录，直接执行form表单，未检测到执行javascript；

2.火狐浏览器：直接执行form表单，未检测到执行javascript；

3.google浏览器：第一次点击登录按钮，先执行了javascript，页面显示内容“请输入手机号码”和“请输入密码”，但再点击一次按钮时，就直接跳转了doLogin页面。

将button按钮放在form表单外，在点击登录按钮，测试结果依然如此，但都未执行form跳转命令。

我的问题是：如何改进这个程序，点击登录时，先执行javascript脚本；且在未输入号码和密码的情况下，都不执行form跳转命令。

form表单如下：

<form class="login_form" id="login_form1" action="__URL__/doLogin"
method="post" >
<div class="input_wrapper">

<label for=login_email>用户名</label>
<input
type="username" id="login_username" name="username" maxlength="11"
/>
</div>
<div class="reg_tip"
id="reg_tip1">
<!--填个手机号作为登录用户名-->

</div>
<p class='clear'></p>
<div
class="input_wrapper">
<label
for="login_password">用户密码</label>
<input
type="password" id="login_password" name="password"
maxlength="11"/>
</div>
<div class="reg_tip"
id="reg_tip2">
<!--请输入密码-->

</div>
<p class='clear'></p>
<button
type="submit"><span><a title="登录"
href="javascript:register1()">登录</a></span></button>

<p class='clear'></p>
<P class="forgot_password"><A
href="index.php?m=index.forget">忘记密码？</A></P>
</form>

javascript 脚本如下：

<script language="javascript" type="text/javascript">
function
register1() {
var error1 = 0,error2 = 0;
var user =
$("#username").val();
var pass = $("#password").val();
var
filter1 = /\s/;
if (!filter1.test(user)) {

$("#reg_tip1").text("请输入手机号码");

$("#username").focus();
error1 = 1;
} else
{
$("#reg_tip1").text("");
error1 =
0;
}
if (!filter1.test(pass)) {

$("#reg_tip2").text("请输入登录密码");

$("#password").focus();
error2 = 1;

}else{
$("#reg_tip2").text("");
error2 = 0;

}
if (error1 == 0 && error2 == 0)
{
var form =
document.getElementById("login_form");

form.submit();
}
}

</script>

Answer 1

<form class="login_form" id="login_form1" action="__URL__/doLogin" method="post" >
<div class="input_wrapper">
<label for=login_email>用户名</label><input type="username" id="login_username" name="username" maxlength="11" />
</div>
<div class="reg_tip" id="reg_tip1"><!--填个手机号作为登录用户名--></div>
<p class='clear'></p>
<div class="input_wrapper">
<label for="login_password">用户密码</label><input type="password" id="login_password" name="password" maxlength="11"/>
</div>
<div class="reg_tip" id="reg_tip2"><!--请输入密码--></div>
<p class='clear'></p>
<button type="submit" onclick="return register1();">登录</button>
<p class='clear'></p>
<P class="forgot_password"><A href="index.php?m=index.forget">忘记密码？</A></P>
</form>
<script>
function register1() {
var user = $("#username").val();
var pass = $("#password").val();
var filter1 = /\s/;
if (!filter1.test(user)) {
$("#reg_tip1").text("请输入手机号码");
$("#username").focus();
return false;
}
$("#reg_tip1").text("");
if (!filter1.test(pass)) {
$("#reg_tip2").text("请输入登录密码");
$("#password").focus();
return false;
}
$("#reg_tip2").text("");
return true;
}
</script>

Answer 2

你可以把按钮的type="submit"改成type="button"就可以了。