资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JavaScript表单验证不成功不能提交怎么办

小编给大家分享一下JavaScript表单验证不成功不能提交怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

目前创新互联已为上千多家的企业提供了网站建设、域名、网络空间、网站改版维护、企业网站设计、岳麓网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

一、基本目标

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

JavaScript表单验证不成功不能提交怎么办

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

JavaScript表单验证不成功不能提交怎么办

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

JavaScript表单验证不成功不能提交怎么办

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

满足设定条件,表单通过get的方法提交。

JavaScript表单验证不成功不能提交怎么办

二、制作过程

整个页面的代码如下:

 
 
  
   
  formcheck 
   
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; 
 
} 
 
  
 
  
   
   
             表单验证小例子            

       请输入信息      

                                                                                                                 
        

下面一个一个函数进行说明:

1.先完成html页面的表单部分,也就是整个页面主体部分

 
 
         表单验证小例子        

     请输入信息    

                                                                             
 

每一个表单的都分别设置了id与name,id是给上面的js函数getelementbyid使用的,name是给action的get方法使用。
onchange()是当用户输入完毕,元素改变之后才js的函数调用,onkeyup是完成一个字母输入就进行js函数调用,那当然选择前者。

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

2.JS函数,也就是头的