表单验证需求：
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>
来源：https://www.cnblogs.com/xiuxiu123456/p/8549669.html