JS-表单验证

妖精的绣舞 提交于 2020-03-29 06:59:55

表单验证需求:
 1、所有表单项需要即时验证,最好是用户写一个验证一个
 2、所有表单项当验证失败的时候提示错误消息,并且错误消息显示到组建的后面,红色字体,要求12号
 3、当表单验证成功之后不提示消息
 4、当只要表单项验证失败,阻止其提交表单
 5、用户名不能为空
 6、用户名长度必须在6-14位
 7、密码和确认密码必须一致
 注意:blur:失去焦点
       focus:获取焦点

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>表单验证</title>
10  </head>
11  <body>
12  <!--
13 //name属性取消之后提交表单时则不会提交这个数据
14  -->
15     <script type="text/javascript">
16         function checkName(userName){
17             var ok=true;
18             var userName=document.getElementById("userName").value;
19             var userName=userName.trim();
20             var spanName=document.getElementById("spanName")
21             if(userName==""){//如果为空,提示用户名错误
22                 ok=false
23                 spanName.innerHTML="用户名不能为空!"
24             }else{
25                 if(userName.length<6||userName.length>14){//用户名长度不在6-14位之间
26                     spanName.innerHTML="用户名必须在6-14位之间!"
27                     ok=false
28                 }else
29                     spanName.innerHTML=""
30                     ok=true
31             }
32             return ok
33         }
34         function newUserName(){
35             //获取焦点
36             var spanName=document.getElementById("spanName")
37             spanName.innerHTML=""
38         }
39         function checkPwd(){
40             var ok=true
41             var pwd=document.getElementById("pwd").value;
42             var checkPassword=document.getElementById("checkPassword").value;
43             var spanPwd=document.getElementById("spanPwd");
44             if(pwd!=checkPassword){//密码不一致
45                 ok=false
46                 spanPwd.innerHTML="密码不一致"
47             }else{//密码一致
48                 spanPwd.innerHTML=""
49                 ok=true
50             }
51             return ok
52         }
53         function newPwd(){
54             var spanPwd=document.getElementById("spanPwd");
55             if(spanPwd.innerHTML!=""){
56                 document.getElementById("pwd").value="";
57                 document.getElementById("checkPassword").value="";
58             }
59             
60             spanPwd.innerHTML=""
61         }
62         function formsubmit(){//如果用户名和密码填写正确则提交表单
63             var userName=document.getElementById("userName").value;
64             if(checkName(userName)&&checkPwd()){
65                 var formsubmit=document.getElementById("formsubmit")
66                 //submit是form表单的一个方法
67                 formsubmit.submit();
68             }
69         }
70     </script>
71   <form method="get" action="192.168.110.1" id="formsubmit">
72     用户名:
73     <input type="text" id="userName"  onblur="checkName(this.value)" onfocus="newUserName()">
74     <span id="spanName" style="color:red;font-size:12px"></span><br>
75     密码:
76     <input type="password" id="pwd"  onfocus="newPwd()"><br>
77     确认密码:
78     <input type="password" id="checkPassword" name="checkPassword" onblur="checkPwd();" onfocus="newPwd()">
79     <span id="spanPwd" style="color:red;font-size:12px"></span><br>
80 
81     <input type="button"  value="注册" onclick="formsubmit()">
82   </form>
83  </body>
84 </html>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!