a 标签提交前验证

时间:2024-11-23 17:37:26

最近在做验证的时候遇到了submit()与onsubmit()事件冲突的问题,本来想在a标签中添加submit()进行表单的提交,然后在 form中添加onsubmit事件触发验证方法。结果行不通,最后只能选择在java script中进行表单的提交。方案如下:

设置form头部如下:添加id是为了在java script脚本中进行中获取form对象

<form method="post" action="AdminServlet" id="Loginform" > 

在a标签中添加onClick()事件,触发java script表单验证的方法loginLayoutValidate()

<a href="javascript:void(0)"   onClick="loginLayoutValidate()"/> 
    function loginLayoutValidate(){
var userName=document.getElementById("userName");
var passWord= document.getElementById("passWord");
var validateCode=document.getElementById("validateCode");
if(userName.value.trim()==""){
alert("用户名不能为空");
return ;
}
else if(passWord.value.trim()==""){
alert("密码不能为空");
return ;
}
else if(validateCode.value.trim()==""){
alert("请输入验证码");
return ;
}
else{
document.getElementById("Loginform").submit();
}
}

例子:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function submitcheck() {
if (document.getElementById('name').value == '') {
alert('必须输入网站名!');
document.getElementById('name').focus();
return false;
} else if (document.getElementById('ftp_url').value == '') {
alert('必须输入Ftp地址!');
document.getElementById('ftp_url').focus();
return false;
} else {
document.getElementById('fm_1').submit();
}
}
</script>
</head> <body>
<form action="#" id="fm_1" name="fm_1">
<input type="text" id="name" name="name" required="required">*
<br>
<input type="text" id="ftp_url" name="ftp_url">*
<br>
<input type="submit" value="提交">
<br>
<input type="reset" value="重置">
<br>
<a href="javascript:void(0)" onclick="checkform()">提交</a>
<br><a href="#" onclick="document.fm_1.reset()">重置</a>
</form>
</body> </html>