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

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

一、基本目标

一个表单认证页，如果输入的用户名超过10位则会立即在输入框旁边弹出提示：

如果密码少于6位，而且两次输入密码不一致同样弹出提示，

如果你没有勾选阅读条款的复选框，同样会弹出提示

知道你所有的项目满足设定的条件之前，提交按钮无效。

满足设定条件，表单通过得到的方法提交。

二、制作过程

整个页面的代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title表单检查/title脚本类型=' text/JavaScript ' function check usrn(){ var check=false；var username=文档。getelementbyid('用户名').价值；if(用户名。长度10){文档。getelementbyid('检查文本1 ').innerHTML=' '不要多于10位；check=false} else { document。getelementbyid('检查文本1 ').innerHTML=''；检查=真}退货支票；}函数检查pwd(){ var check=false；var password=文档。getelementbyid('密码').价值；if(密码。长度6){文档。getelementbyid('检查文本2 ').innerHTML=' '不要少于6位；check=false} else { document。getelementbyid('检查文本2 ').innerHTML=''；检查=真}退货支票；}函数检查pwdc(){ var check=false；var password=文档。getelementbyid('密码').价值；var pwdc=文档。getelementbyid(' pwdc ').价值；如果（密码！=pwdc){文档。getelementbyid('检查文本3 ').innerHTML=' '两次输入密码不一致；check=false} else { document。getelementbyid('检查文本3 ').innerHTML=''；检查=真}退货支票；} function checkcb(){ var check=false if(！文件。getelementsbyname('复选框')[0].选中){文档。getelementbyid('检查文本4 ').innerHTML=' '请同意我们的条款才可以继续申请；check=false} else { document。getelementbyid('检查文本4 ').innerHTML=check=true}退货支票；}函数check(){ var check=check usrn())check pwd()(check pwdc())check CB()；退货支票；}/脚本/头部身体形态动作='成功。提交时html ' method=' get '=' return check()'字段集图例表单验证小例子/图例h3请输入信息/h3标签用户名：/标签输入类型=' text ' id=' username ' name=' username ' on change=' checkusrn()'/span id=' check text 1 '/span br/label密码：/标签输入类型=' password ' id=' password ' name=' password ' on change=' check pwd()'/span id=' check text 2 '/span br/label确认密码：/label输入类型=' password ' id=' pwdc ' name=' 变更时的pwdc=' checkpwdc()'/span id=' check text 3 '/span br/输入类型=' checkbox ' name=' checkbox ' on change=' checkcb()'/标签我已经阅读了xx条款并不能同意得更多/label span id=' check text 4 '/span br/br/输入类型='submit '值='走!'//fieldset /form /body /html下面一个一个函数进行说明：

1.先完成超文本标记语言页面的表单部分，也就是整个页面主体身体部分

表单操作='success.html '方法=' get ' on submit=' return check()'字段集图例表单验证小例子/图例h3请输入信息/h3标签用户名：/标签输入类型=' text ' id=' username ' name=' username ' on change=' checkusrn()'/span id=' check text 1 '/span br/label密码：/标签输入类型=' password ' id=' password ' name=' password ' on change=' check pwd()'/span id=' check text 2 '/span br/label确认密码：/label输入类型=' password ' id=' pwdc ' name=' pwdc ' on change=' checkpwdc()'/span id=' check text 3 '/span br/input type=' checkbox ' name=' checkbox ' on change=' checkcb()'/label我已经阅读了xx条款并不能同意得更多/label span id=' check text 4 '/span br/br/输入类型='submit '值='走!'//fieldset /form每一个表单的都分别设置了编号与姓名、身份证是给上面的射流研究…函数getelementbyid使用的，名称是给行为的得到方法使用onchange()是当用户输入完毕，元素改变之后才射流研究…的函数调用，onkeyup是完成一个字母输入就进行射流研究…函数调用，那当然选择前者。

总表单的提交是首先要通过onsubmit()方法的判断，如果这个onsubmit()的真值不为真，就不让提交，一般这个值默认为真，表单是无条件就条件，所以我们要让其返回检查()所返回的值，看看此表单是否被允许调教

2.射流研究…函数，也就是头头的脚本类型="文本/javascript "部分

(1)checkusrn()，checkpwd()，checkpwdc()

function checkusrn(){ var check=false；var username=文档。getelementbyid('用户名').价值；if(用户名。长度10){文档。getelementbyid('检查文本1 ').innerHTML=' '不要多于10位；check=false} else { document。getelementbyid('检查文本1 ').innerHTML=''；检查=真}退货支票；}函数检查pwd(){ var check=false；var password=文档。getelementbyid('密码').价值；if(密码。长度6){文档。getelementbyid('检查文本2 ').innerHTML=' '不要少于6位；check=false} else { document。getelementbyid('检查文本2 ').innerHTML=''；检查=真}退货支票；}函数检查pwdc(){ var check=false；var password=文档。getelementbyid('密码').价值；var pwdc=文档。getelementbyid(' pwdc ').价值；如果（密码！=pwdc){文档。getelementbyid('检查文本3 ').innerHTML=' '两次输入密码不一致；check=false} else { document。getelementbyid('检查文本3 ').innerHTML=''；检查=真}退货支票；} 三部分逻辑完全一样，先立个判断标志，检查，看是否认证通过，为下面的总判断函数做准备。之所分开三个函数写，并立起不同的标志（请注意每个支票值只作用于每个函数内，互不影响),传到总的支票函数。是保证不会出现类似还没输入密码框就说密码输入少于6位的情况。

同时，拿值，立即改变输入框旁边的行内文本跨度。

值得注意的是checkpwdc()要同时拿走上面的密码框的输入值，否则无法完成这次判断。

(2)checkcb()

function checkcb(){ var check=false if(！文件。getelementsbyname('复选框')[0].选中){文档。getelementbyid('检查文本4 ').innerHTML=' '请同意我们的条款才可以继续申请；check=false} else { document。getelementbyid('检查文本4 ').innerHTML=check=true}退货支票；} 请注意复选框的判断与文本框、密码框的判断是不同的，要用getelementbyname()去拿名字而不能如同上面的方法那样拿身份

(3)总判断函数检查()

函数check(){ var check=check usrn())check pwd()(check pwdc())check CB()；退货支票；} 意思是上述所有函数必须判断通过，此函数的返回值才是真，此乃合取式，一个为假，此式就为假。把这个支票打到总表单的onsubmit()事件的返回值中，控制表单是否能够提交，接触行为指向的页面。

至此，制作完毕。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。