javascript中对<form>表单的submit验证以及action提交，及它们的区别。

最新推荐文章于 2024-04-12 07:49:33 发布

无畏东西

最新推荐文章于 2024-04-12 07:49:33 发布

阅读量5.9k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/wo6218298/article/details/53255791

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里有一篇学习中代码，以作分析

<html>
<script language="javascript">
function on_submit()
{//验证数据的合法性
if (form1.username.value == "")
    {
     alert("用户名不能为空，请输入用户名！");
     form1.username.focus();
     return false;
    }
    if (form1.userpassword.value == "")
    {
     alert("用户密码不能为空，请输入密码！");
     form1.userpassword.focus();
     return false;
    }
    if (form1.reuserpassword.value == "")
    {
     alert("用户确认密码不能为空，请输入密码！");
     form1.reuserpassword.focus();
     return false;
    }
   if (form1.userpassword.value != form1.reuserpassword.value)
    {
    alert("密码与确认密码不同");
    form1.userpassword.focus();
     return false;
    }
if (form1.email.value.length!= 0)
  {
   for (i=0; i<form1.email.value.length; i++)
     if (form1.email.value.charAt(i)=="@")
     break;
   if (i==form1.email.value.length)
   {
     alert("非法EMail地址！");
     form1.email.focus();
     return false;
    }
   }
else
       {
        alert("请输入Email！");
  form1.email.focus();
  return false;

        }
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新用户注册</title>
</head>
<body>
<form method="POST" action="regist.jsp" name="form1" οnsubmit="return on_submit()">
新用户注册<br>
用户名(*)：      <input type="text" name="username" size="20"><br>
密  码(*)： <input type="password" name="userpassword" size="20"><br>
再输一次密码(*): <input type="password" name="reuserpassword" size="20"><br>
性别：           <input type="radio" value="男" checked name="sex">男<input type="radio" name="sex" value="女">女<br>
出生年月：       <input name="year" size="4" maxlength=4>年
                   <select name="month">
                       <option value="1" selected>1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       <option value="5">5</option>
                       <option value="6">6</option>
                       <option value="8">7</option>
                       <option value="9">9</option>
                       <option value="10">10</option>
                       <option value="11">11</option>
                       <option value="12">12</option>
                   </select>月
                   <input name="day" size="3" maxlength=4>日<br>
电子邮箱(*)：    <input name="email" maxlength=28><br>
家庭住址：       <input type="text" name="address" size="20"><br>
<input type="submit" value="提交" name="B1"><input type="reset" value="全部重写" name="B2"><br>
</form>
</body>
</html>

这段代码在<form>中有οnsubmit="return on_submit()"，如果 onsubmit （）返回 fasle，表单的元素就不会提交，即action="regist.jsp"不会执行，如果该函数返回其他值或什么都没有返回，则表单会被提交，即执行action="regist.jsp"。也就是说，onsubmit是用来验证输入信息，而action是提供一个表单完成被提交的路径。在这里，action路径没有写出来自然无效。