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

每一个表单的都分别设置了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指向的页面。

至此,制作完毕。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygfwf.html