首页
所有分类
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 学习笔记（四）
Dec 31 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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
YB400(2) MX500(1) 森海(1) 1 Tube Radio(1) 直流胆(1) YB217(1) 南麂列岛(1) YB235(1) 再生机(1) S2000(3)
You might like
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
网络资源
2006/10/09 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP实现验证码校验功能
2017/11/16 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
jquery 上下滚动广告
2009/06/17 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python饼状图的绘制实例
2019/01/15 Python
Python3爬楼梯算法示例
2019/03/04 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
python next()和iter()函数原理解析
2020/02/07 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
施华洛世奇美国官网：SWAROVSKI美国
2018/02/08 全球购物
什么是数组名
2012/05/10 面试题
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
推荐信格式范文
2014/05/09 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL