form--input如果为空的话禁止action跳转页面（js）

最新推荐文章于 2022-08-21 01:24:21 发布
最新推荐文章于 2022-08-21 01:24:21 发布
阅读量3.7k 收藏
点赞数
分类专栏： html5 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_23049475/article/details/41787333
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>


<body>
<script type="text/javascript">
 
 function check()
  {var i=1;//right
    if(document.form1.username.value=="")
 {
 document.getElementById("user").innerHTML="* 用户名不能为空";
 document.getElementById("user").style.color="#ff0000"
 i=0;
 }
 else
 {
  document.getElementById("user").innerHTML="√";
  document.getElementById("user").style.color="#32CD32";
 }
 
 
 
 
if(document.form1.password1.value=="")
{
  if(document.form1.password2.value=="")
    {
      document.getElementById("pass1").innerHTML="* 密码不能为空";
      document.getElementById("pass1").style.color="#ff0000"//1
  document.getElementById("pass2").innerHTML="* 密码不能为空";
      document.getElementById("pass2").style.color="#ff0000"//2
      i=0;
    }
else
 {
 
  document.getElementById("pass1").innerHTML="* 密码不能为空!";
      document.getElementById("pass1").style.color="#ff0000"//1
  document.getElementById("pass2").innerHTML="";
  i=0;
 }
}
 
 
if(document.form1.password1.value!="")
{
 
        if(document.form1.password2.value!="")
     {
   if(document.form1.password1.value!=document.form1.password2.value)
     {
      document.getElementById("pass1").innerHTML="* 两次密码不一致";
          document.getElementById("pass1").style.color="#ff0000";
      document.getElementById("pass2").innerHTML="* 两次密码不一致";
          document.getElementById("pass2").style.color="#ff0000";
          i=0;
 
     }
 else
 {
          document.getElementById("pass1").innerHTML="√";
          document.getElementById("pass1").style.color="#32CD32";
  document.getElementById("pass2").innerHTML="√";
          document.getElementById("pass2").style.color="#32CD32";
         }
     }
 else
 {
  document.getElementById("pass1").innerHTML="";
  document.getElementById("pass2").innerHTML="* 密码不能为空";
      document.getElementById("pass2").style.color="#ff0000";
      i=0;
 }
 
     }
 
 

if(document.form1.year.value=="")
{
 document.getElementById("ye").innerHTML="* 年龄不能为空";
 document.getElementById("ye").style.color="#ff0000";
 i=0;
}
else
{
 if(isNaN(document.form1.year.value))
 {
  document.getElementById("ye").innerHTML="* 年龄必须为数字";
  document.getElementById("ye").style.color="#ff0000";
  i=0;
 }
 else
  {
   if(parseInt(document.form1.year.value,10)<17)
   {
    document.getElementById("ye").innerHTML="* 年龄必须大于17岁!";
    document.getElementById("ye").style.color="#ff0000";
    i=0;
   }
   else
    {
    document.getElementById("ye").innerHTML="√";
    document.getElementById("ye").style.color="#32CD32";
    }
 }
}
 
 
if(document.form1.weight.value=="")
{
  document.getElementById("wei").innerHTML="* 体重不能为空"
  document.getElementById("wei").style.color="#ff0000";
  i=0;
}
else
{
   if(isNaN(document.form1.weight.value))
   {
    document.getElementById("wei").innerHTML="* 年龄必须为数字";
    document.getElementById("wei").style.color="#ff0000";
    i=0;
   }
else
{
    if(parseInt(document.form1.weight.value,10)<30||parseInt(document.form1.weight.value,10)>150)
    {
     document.getElementById("wei").innerHTML="* 体重必须介于30kg-50kg";
     document.getElementById("wei").style.color="#ff0000";
     i=0;
     }
     else
    {
    document.getElementById("wei").innerHTML="√";
    document.getElementById("wei").style.color="#32CD32";
    }
}
}
 
 
 
if(document.form1.email.value=="")
 {
   document.getElementById("semail").innerHTML="* email不能为空";
   document.getElementById("semail").style.color="#ff0000";
   i=0;
 }
 else
  {
      var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
          if(!myreg.test(document.form1.email.value))
         {
               document.getElementById("semail").innerHTML="* 输入有效的email地址";
   document.getElementById("semail").style.color="#ff0000";
                 
                i=0;
           }
       else
  {
   document.getElementById("semail").innerHTML="√";
   document.getElementById("semail").style.color="#32CD32";
  }
  }
     
 
 if(document.form1.telephone.value=="")
  {
  document.getElementById("tele").innerHTML="* 电话号码不能为空";
  document.getElementById("tele").style.color="#ff0000";
  i=0;
  }
 else
 {
   var reg=/1[3-8]+\d{9}/;
   if(document.form1.telephone.value.length!=11||!reg.test(document.form1.telephone.value))
   {
document.getElementById("tele").innerHTML="* 手机号码不合法";
    document.getElementById("tele").style.color="#ff0000";
i=0;
}
 else
   {
   document.getElementById("tele").innerHTML="√";
   document.getElementById("tele").style.color="#32CD32";
   }
 }
 
 
 if(document.form1.qq.value=="")
 {
  document.getElementById("sqq").innerHTML="* qq不能为空";
  document.getElementById("sqq").style.color="#ff0000"
  i=0;
 }
  else
   {
 if(isNaN(document.form1.qq.value))
     {
      document.getElementById("sqq").innerHTML="* qq必须为数字";
      document.getElementById("sqq").style.color="#ff0000";
       i=0;
      }
     else
      {
       document.getElementById("sqq").innerHTML="√";
       document.getElementById("sqq").style.color="#32CD32";
   }
   }
 
 
 if(document.form1.introduce.value=="")
 {
  document.getElementById("intro").innerHTML="* 简介不能为空";
  document.getElementById("intro").style.color="#ff0000"
  i=0;
 }
 else
 {
   document.getElementById("intro").innerHTML="√";
   document.getElementById("intro").style.color="#32CD32";
 }
 
if(i==1)
return true;
else 
return false;
  }


</script>
<div style="margin-left:40%; margin-top:8%; padding:2px;">
<form  name="form1" method="post" action="welcome.html" οnsubmit="return check()">
用户名：&nbsp;&nbsp;
<input type="text" name="username" id="username"/>&nbsp;<span id="user"></span><br/>
密码： &nbsp;&nbsp;&nbsp;
<input type="password" name="password" id="password1"/>&nbsp;<span id="pass1"></span><br/>
确认密码：
<input type="password" name="password2" id="password2"/>&nbsp;<span id="pass2"></span><br/>
年龄: &nbsp; &nbsp;&nbsp;
<input type="text" name="year" id="year"  />&nbsp;<span id="ye"></span><br/>
体重: &nbsp; &nbsp;&nbsp;
<input type="text" name="weight" id="weight"/>&nbsp;<span id="wei"></span><br/>
班级: &nbsp;&nbsp;&nbsp;&nbsp;
<select name="cars">
<option value="122-1">122-1</option>
<option value="122-2">122-2</option>
<option value="123=1">123-1</option>
<option value="123-2">123-2</option>
</select>&nbsp;<span></span><br/>


电子邮件：
<input type="text" name="email" id="email"/>&nbsp;<span id="semail"></span><br/>
电话号码：
<input type="text" name="telephone" id="telephone" οnkeyup="value=value.replace(/[^\d{11}$)"/>&nbsp;<span id="tele"></span><br/>
qq号码：&nbsp;&nbsp;
<input type="text" name="qq" id="qq"/>&nbsp;<span id="sqq"></span><br/>
自我介绍：
<textarea  name="introduce" id="introduce"></textarea> &nbsp;<span id="intro"></span><br/>


<input type="submit"  value="提交"/>
</form>
</div>
</body>
</html>
侯衍超
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序（二十二）action-sheet组件详细介绍
09-01
在JS部分，你需要管理`actionSheetHidden`的值来控制Action-Sheet的显示和隐藏。当用户点击触发Action-Sheet的按钮时，可以调用`setData`方法改变`actionSheetHidden`的值，从而控制Action-Sheet的显示或隐藏。同时...
解决form中action属性后面?传递参数 获取不到的问题
10-19
2. 如果需要在URL中携带某些参数，可以使用隐藏的`<input>`元素，将这些参数作为`POST`数据的一部分传递。 请注意，`POST`方法相比`GET`方法更安全，因为它不会将敏感信息显示在URL上，但也有一些限制，比如数据...
JQuery禁用form提交事件
fendo
06-04 7716
在form表单中使用了button的onclick进行跳转,每次点击button时,就会引起表单的提交事件,解决方法就是在点击button的时候禁用表单提交事件: function check(){ var password = document.getElementById("password").value; var pwd = document.getElementBy
表单页面提交后不跳转的处理方法
hslisz的博客
08-05 3999
表单页面提交后不跳转、表单域校验提示提交成功，并重置当前页面、实现上传文件多选
html验证表单不能空并跳转,表单验证输入内容不能为空的方法
weixin_31921223的博客
06-04 4089
HTML 表单验证可以通过 JavaScript 来完成。以下实例代码用于判断表单字段fieldset或(fname)值是是否为空，如果空，则弹出提示信息阻止表单提交，密码至少为6位，两次密码要一样，如果不一样也会阻止表单提交。html>fieldset{width:600px;height:120px;margin:0auto;}functionbeforeSubmit(form...
form表单提交数据不让跳转办法
兔子很忙
07-01 7144
form表单提交数据不让跳转办法 应用场景： 1、弹出层 2、需要连续提交多条记录的情况 3、页面多个存在提交事件，需要局部提交情况 方法一：加个return false，阻止表单跳转 <form action="/api/xxx/action" method="post" onsubmit = "return false"> 方法二： 把type="submit"属性换成type=“button” <input type="button" name="submit" value="
vue 解决form表单提交但不跳转页面的问题
10-16
在Vue.js框架中，表单提交是一个常见的交互行为，但默认情况下，HTML的`<form>`元素在提交时会向其`action`属性指定的URL发送数据并导致页面重载或跳转。在某些场景下，如AJAX提交或者希望在当前页面处理提交的数据...
layui使用form表单实现post请求页面跳转的方法
10-16
本文将详细介绍如何使用layui的form表单实现POST请求并进行页面跳转，以确保数据安全且避免信息泄露。 通常，通过`window.location.href`的方式添加参数进行页面跳转会将数据暴露在URL中，这可能带来安全风险。为了...
form表单只提交数据而不进行页面跳转的解决方案
01-19
点击submit按钮或直接回车可以将数据提交到saveReport页面，但是提交后也会跳转到saveReport页面 如何做到 将数据提交到saveReport（form的action指向）页面，但是页面又不进行跳转，即保持当前页面不变呢？...
Java Web 当输入密码或者用户名为空时会提示
热门推荐
qq_50729588的博客
10-07 1万+
做一个index.JSP生成的页面输入用户名和密码，传递到另一个a.JSP生成页面显示输入的信息，但是当输入的用户名或密码为空时，会从a.jsp转发输入为空的提示错误信息显示到index.JSP生成的页面上。同时当输入了用户名但是没输入密码时，提示密码为空后，用户名那一栏还保留之前输入的信息 他们之间的流程图如下： index.jsp页面的代码： <%-- Document : index Created on : 2020-10-7, 8:16:47 Author
阻止form表单提交按钮的默认 action
小小的博客
08-01 6979
$(document).ready(function(){ $("form").submit(function(e){ e.preventDefault(); alert("Submit prevented"); }); });
JavaWeb基础(学习笔记)（二）
weixin_45066737的博客
09-04 283
1.创建JSP页面 首先，在创建之前必须要做的事，更改编码。 在jsp页面中输出数组中的元素案例，使用for循环和Arrays.toString()方法 介绍两种导包方式： 1.<%@ page language="java" import = "java.util.Arrays" contentType="text/html; charset=UTF-8" pageEncodin...
做一个登入界面如果输入框为空则弹出空格
m0_58975873的博客
10-22 598
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> a{ display:block; width:40px; height:16px; border:2px outset #eee; .
Javaweb登录页面使用JQuery循环判断输入框不能为空
weixin_59334478的博客
05-19 1474
当用户名输入框和密码输入框什么都不输入时，点击登录弹出弹窗显示用户名不能为空 当只输入密码不输入用户名时，点击登录弹出弹窗显示用户名不能为空 当只输入用户名不输入密码时，显示密码不能为空 JQuery代码展示，注意需要引入jquery包，当然也可以引用在线jquery包 字节跳动公司的jquery（速度快推荐） <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"><.
form表单提交和阻止
weixin_33860147的博客
11-28 583
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
阻止form表单提交，和提交时产生的问题总结
2³
08-04 7743
一、首先总结 阻止 form 表单提交的几种方法 <button> 提交时，type默认为submit，阻止提交将type改为button，即 type="button" <form action=""> <button type="submit"></button> </form> <input> 提交时，将type改为button，即 type="button" <form action=""> &
禁用Form表单提交的跳转
Markix的博客
08-21 2173
默认Form表单提交后浏览器地址会跳转到action地址，有时候我们只是想要Form表单发起一个请求，并不希望浏览器的地址跳转。这就需要禁用Form表单的跳转机制。
from表单禁止提交
thewebcode
07-04 853
1、JavaScript验证阻止提交表单 &lt;html&gt; &lt;head&gt; &lt;metahttp-equiv="Content-Type"content="text/html;charset=gbk"&gt; &lt;title&gt;JavaScript禁止提交表单&lt;/title&gt; &lt;scripttype="
php 表单跳转,php怎么实现form提交表单并跳转到action页面
最新发布
05-28
要实现表单提交并跳转到指定页面，可以使用form表单中的action属性来指定跳转的页面，如下所示： ``` <form action="action.php" method="post"> <!-- 表单元素 --> <input type="text" name="username"> <input ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值