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 相关文章推荐
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
新手入门js闭包学习过程解析
Oct 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
You might like
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP数组实例详解
2016/06/26 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
js+css3实现炫酷时钟
2020/08/18 Javascript
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python读写csv文件方法详细总结
2019/07/05 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
初中生学习的自我评价
2013/11/14 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书