广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript表单验证不成功不能提交怎么办
  • 854

0
分享到

JavaScript表单验证不成功不能提交怎么办

2024-04-02 19:04:59 854人浏览 泡泡鱼
摘要

小编给大家分享一下javascript表单验证不成功不能提交怎么办，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、基本目标一个

小编给大家分享一下javascript表单验证不成功不能提交怎么办，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一、基本目标

一个表单认证页，如果输入的用户名超过10位则会立即在输入框旁边弹出提示：

JavaScript表单验证不成功不能提交怎么办

如果密码少于6位，而且两次输入密码不一致同样弹出提示，

JavaScript表单验证不成功不能提交怎么办

如果你没有勾选阅读条款的复选框，同样会弹出提示

JavaScript表单验证不成功不能提交怎么办

知道你所有的项目满足设定的条件之前，提交按钮无效。

满足设定条件，表单通过get的方法提交。

JavaScript表单验证不成功不能提交怎么办

二、制作过程

整个页面的代码如下：

<!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>fORMcheck</title> 
  <script type="text/javascript"> 
function checkusrn() { 
 var check = false; 
 var username = document.getElementById("username").value; 
 if (username.length > 10) { 
  document.getElementById("checktext1").innerHTML = " × 不要多于10位"; 
  check = false; 
 } else { 
  document.getElementById("checktext1").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
 
function checkpwd() { 
 var check = false; 
 var passWord = document.getElementById("password").value; 
 if (password.length < 6) { 
  document.getElementById("checktext2").innerHTML = " × 不要少于6位"; 
  check = false; 
 } else { 
  document.getElementById("checktext2").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
function checkpwdc() { 
 var check = false; 
 var password = document.getElementById("password").value; 
 var pwdc = document.getElementById("pwdc").value; 
 if (password != pwdc) { 
  document.getElementById("checktext3").innerHTML = " × 两次输入密码不一致"; 
  check = false; 
 } else { 
  document.getElementById("checktext3").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
function checkcb() { 
 var check = false 
 
 if (!document.getElementsByName("checkbox")[0].checked) { 
  document.getElementById("checktext4").innerHTML = " × 请同意我们的条款才可以继续申请"; 
  check = false; 
 } else { 
  document.getElementById("checktext4").innerHTML = ""; 
  check = true; 
 
 } 
 return check; 
 
} 
function check() { 
 var check = checkusrn() && checkpwd() && checkpwdc() && checkcb(); 
 return check; 
 
} 
</script> 
 </head> 
 
 <body> 
  <form action="success.html" method="get" onsubmit="return check()"> 
   <fieldset> 
    <legend> 
     表单验证小例子 
    </legend> 
    <h4> 
     请输入信息 
    </h4> 
    <label> 
     用户名： 
    </label> 
    <input type="text" id="username" name="username" 
     onchange="checkusrn()" /> 
    <span id="checktext1"></span> 
    <br /> 
    <label> 
     密码： 
    </label> 
    <input type="password" id="password" name="password" 
     onchange="checkpwd()" /> 
    <span id="checktext2"></span> 
    <br /> 
    <label> 
     确认密码： 
    </label> 
    <input type="password" id="pwdc" name="pwdc" onchange="checkpwdc()" /> 
    <span id="checktext3"></span> 
    <br /> 
    <input type="checkbox" name="checkbox" onchange="checkcb()" /> 
    <label> 
     我已经阅读了XX条款并不能同意得更多 
    </label> 
    <span id="checktext4"></span> 
    <br /> 
    <br /> 
    <input type="submit" value="走！" /> 
   </fieldset> 
  </form> 
 </body> 
</html>

下面一个一个函数进行说明：

1.先完成html页面的表单部分，也就是整个页面主体<body>部分

<form action="success.html" method="get" onsubmit="return check()"> 
 <fieldset> 
  <legend> 
   表单验证小例子 
  </legend> 
  <h4> 
   请输入信息 
  </h4> 
  <label> 
   用户名： 
  </label> 
  <input type="text" id="username" name="username" 
   onchange="checkusrn()" /> 
  <span id="checktext1"></span> 
  <br /> 
  <label> 
   密码： 
  </label> 
  <input type="password" id="password" name="password" 
   onchange="checkpwd()" /> 
  <span id="checktext2"></span> 
  <br /> 
  <label> 
   确认密码： 
  </label> 
  <input type="password" id="pwdc" name="pwdc" onchange="checkpwdc()" /> 
  <span id="checktext3"></span> 
  <br /> 
  <input type="checkbox" name="checkbox" onchange="checkcb()" /> 
  <label> 
   我已经阅读了XX条款并不能同意得更多 
  </label> 
  <span id="checktext4"></span> 
  <br /> 
    <br /> 
  <input type="submit" value="走！" /> 
 </fieldset> 
</form>

每一个表单的都分别设置了id与name，id是给上面的js函数getelementbyid使用的，name是给action的get方法使用。
onchange()是当用户输入完毕，元素改变之后才js的函数调用，onkeyup是完成一个字母输入就进行js函数调用，那当然选择前者。

总表单的提交是首先要通过onsubmit()方法的判断，如果这个onsubmit()的真值不为真，就不让提交，一般这个值默认为真，表单是无条件就条件，所以我们要让其返回check()所返回的值，看看此表单是否被允许调教

2.JS函数，也就是<head>头的<script type="text/javascript">部分

(1)checkusrn() ,checkpwd(),checkpwdc()

function checkusrn() { 
 var check = false; 
 var username = document.getElementById("username").value; 
 if (username.length > 10) { 
  document.getElementById("checktext1").innerHTML = " × 不要多于10位"; 
  check = false; 
 } else { 
  document.getElementById("checktext1").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
 
function checkpwd() { 
 var check = false; 
 var password = document.getElementById("password").value; 
 if (password.length < 6) { 
  document.getElementById("checktext2").innerHTML = " × 不要少于6位"; 
  check = false; 
 } else { 
  document.getElementById("checktext2").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
} 
function checkpwdc() { 
 var check = false; 
 var password = document.getElementById("password").value; 
 var pwdc = document.getElementById("pwdc").value; 
 if (password != pwdc) { 
  document.getElementById("checktext3").innerHTML = " × 两次输入密码不一致"; 
  check = false; 
 } else { 
  document.getElementById("checktext3").innerHTML = " √"; 
  check = true; 
 } 
 return check; 
}

三部分逻辑完全一样，先立个判断flag，check，看是否认证通过，为下面的总判断函数做准备。 之所分开三个函数写，并立起不同的flag（请注意每个check值只作用于每个函数内，互不影响），传到总的check函数。是保证不会出现类似还没输入密码框就说密码输入少于6位的情况。

同时，拿值，立即改变输入框旁边的行内文本<span>。

值得注意的是checkpwdc()要同时拿走上面的密码框的输入值，否则无法完成这次判断。

(2)checkcb()

function checkcb() { 
 var check = false 
 
 if (!document.getElementsByName("checkbox")[0].checked) { 
  document.getElementById("checktext4").innerHTML = " × 请同意我们的条款才可以继续申请"; 
  check = false; 
 } else { 
  document.getElementById("checktext4").innerHTML = ""; 
  check = true; 
 
 } 
 return check; 
 
}

请注意复选框的判断与文本框、密码框的判断是不同的，要用getelementbyname（）去拿name而不能如同上面的方法那样拿ID

(3)总判断函数check()

function check() { 
 var check = checkusrn() && checkpwd() && checkpwdc() && checkcb(); 
 return check; 
}

意思是上述所有函数必须判断通过，此函数的返回值才是真，此乃合取式，一个为假，此式就为假。
把这个check打到总表单的onsubmit()事件的返回值中，控制表单是否能够提交，接触action指向的页面。

至此，制作完毕。

以上是“JavaScript表单验证不成功不能提交怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript表单验证不成功不能提交怎么办

本文链接: https://www.lsjlt.com/news/72981.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • JavaScript表单验证不成功不能提交怎么办
    小编给大家分享一下JavaScript表单验证不成功不能提交怎么办，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、基本目标一个...
    99+
    2022-10-19
  • php表单提交不能接收怎么办
    本教程操作环境：Windows7系统、PHP8.1版、Dell G3电脑。php表单提交不能接收怎么办？PHP form表单提交 _POST接收不到PHP新手学习中,记录在学习过程中的问题及解决办法遇到的问题今天在做一个相册管理的小demo...
    99+
    2022-11-25
    php
  • php验证码后台不能生成怎么办
    本文操作环境：windows7系统、PHP7.1版、DELL G3电脑php验证码后台不能生成怎么办？PHP验证码不能生成图片，原因解决:生成图片时，header('Content-type: image/png')；前面不...
    99+
    2021-04-16
    php 验证码
  • 怎么解决Ajax提交参数的值中带有html标签不能提交成功的问题
    这篇文章主要介绍“怎么解决Ajax提交参数的值中带有html标签不能提交成功的问题”，在日常操作中，相信很多人在怎么解决Ajax提交参数的值中带有html标签不能提交成功的问题问题上存在疑惑，小编查阅了各式...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作