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 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 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 url路由入门实例
2014/04/23 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python提示No module named images的解决方法
2014/09/29 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
关于打架的检讨书
2014/01/17 职场文书
室内设计专业自荐信
2014/05/31 职场文书
英文自荐信范文
2015/03/25 职场文书
师范生教育见习总结
2015/06/23 职场文书
初中毕业生感言
2015/07/31 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书