首页
所有分类
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 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
jquery 使用简明教程
Mar 05 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
微信公众平台开发教程（六）获取个性二维码的实例
Dec 02 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 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
井字棋(1) 五子棋(12) 图像处理(1) opencv(7) 模糊匹配(1) PyTorch(1) FuzzyWuzzy(1) 人工智能(2) Pyecharts(7) 模型保存加载(1)
You might like
星际实力自我测试
2020/03/04 星际争霸
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP中的session安全吗？
2016/01/22 PHP
PHP编写简单的App接口
2016/08/28 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
微信小程序实现自定义底部导航
2020/11/18 Javascript
常见python正则用法的简单实例
2016/06/21 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python实现字符串和字典的转换
2018/09/29 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python中如何写类
2020/06/29 Python
简历中自我评价分享
2013/10/09 职场文书
经济管理自荐书
2014/06/09 职场文书
医德医风个人总结
2015/02/28 职场文书
我去timi了，一起去timi是什么意思？
2022/04/13 杂记