首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript表单即时验证 验证不成功不能提交

Posted in Javascript onAugust 31, 2017

不能再让表单在提交按钮之后才被验证了！你输入的任何信息表单都会即时反应！
这个JavaScript的关键是onChange()事件，使用onKeyUp()事件完成是不行的，人家没有输入完毕，你就说人家不对，多不友好啊?(???)?

一、基本目标

一个表单认证页，如果输入的用户名超过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> 
    <h3> 
     请输入信息 
    </h3> 
    <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> 
  <h3> 
   请输入信息 
  </h3> 
  <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表单即时验证 验证不成功不能提交

- Author -

yongh701

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中的return和闭包函数浅析
Jun 06 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
javascript实现自动输出文本（打字特效）
Aug 27 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
教大家轻松制作Bootstrap漂亮表格（table）
Dec 13 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 #Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 #Javascript
vue实现全选和反选功能
Aug 31 #Javascript
浅谈Vue 初始化性能优化
Aug 31 #Javascript
Vue keep-alive实践总结（推荐）
Aug 31 #Javascript
深入理解vue-router之keep-alive
Aug 31 #Javascript
vue-router 导航钩子的具体使用方法
Aug 31 #Javascript
seata(1) exec(1) Flask Web(1) MyBatis(5) cv2(1) nacos(1) OpenGL(1) 三角函数(1) 面向接口(1) Android Studio(4)
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
使用 php4 加速 web 传输
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php中in_array函数用法分析
2014/11/15 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php语言注释，单行注释和多行注释
2018/01/21 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
JavaScript高级程序设计（第3版）学习笔记5 js语句
2012/10/11 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
logging level级别介绍
2020/02/21 Python
什么是python的必选参数
2020/06/21 Python
python实现自动清理重复文件
2020/08/24 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
公积金接收函格式
2015/01/30 职场文书
碧霞祠导游词
2015/02/09 职场文书
简单的辞职信模板
2015/05/12 职场文书
爱国主义电影观后感
2015/06/18 职场文书
七年级生物教学反思
2016/02/20 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
应用最多的公文《通知》如何写？
2019/04/02 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server