The full name of JSON is “JavaScript Object Notation”, which means JavaScript Object Notation. It is a text-based, language-independent lightweight data exchange format.
First type:
The user experience may not be very good, but the warning effect to users is obvious (interface pop-up warning)
Form onsubmit function
JavaScript
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>js_alert</title>
8 <title>Registration page</title>
9 <script>
10 function checkForm(){
11 var cvalue = document.getElementById("college").value;
12 if(cvalue=="")
13 {
14 alert("Graduation university not filled in!");
15 return false;
16}
17 var uValue = document.getElementById("user").value;
18 if(uValue==""){
19 alert("Username cannot be empty!");
20 return false;
twenty one }
twenty two
23 var pValue = document.getElementById("password").value;
24 if(pValue==""){
25 alert("Password cannot be empty!");
26 return false;
27}
28
29 var rpValue = document.getElementById("repassword").value;
30 if(rpValue!=pValue){
31 alert("The two password inputs are inconsistent!");
32 return false;
33}
34
35 var eValue = document.getElementById("email").value;
36 if(!/^([a-zA-Z0-9_-]) + @([a-zA-Z0-9_-]) + (.[a-zA-Z0-9_-]) + /.test (eValue)){
37 alert("The email format is incorrect!");
38 return false;
39 }
40}
41 </script>
42 </head>
43 <body>
44 <body>
45 <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
46 <tr>
47 <td height="600px" >
48 <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
49 <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white ">
50 <tr>
51 <td>
52 Graduation University
53 </td>
54 <td>
55 <input type="text" id="college" size="34px" name="college"/>
56 </td>
57 </tr>
58
59
60 <tr>
61 <td>
62 usernames
63 </td>
64 <td>
65 <input type="text" name="user" size="34px" id="user"/>
66 </td>
67 </tr>
68
69 <tr>
70 <td>
71 Password
72 </td>
73 <td>
74 <input type="password" name="password" size="34px" id="password" />
75 </td>
76 </tr>
77
78 <tr>
79 <td>
80 Confirm password
81 </td>
82 <td>
83 <input type="password" name="repassword" size="34px" id="repassword"></input>
84 </td>
85 </tr>
86
87 <tr>
88 <td>
89 Email
90 </td>
91 <td>
92 <input type="text" name="email" size="34px" id="email"/>
93 </td>
94 </tr>
95
96 <tr>
97 <td>
98 names
99 </td>
100 <td>
101 <input type="text" name="username" size="34px" id="username"></input>
102 </td>
103 </tr>
104
105 <tr>
106 <td>
107 sex
108 </td>
109 <td>
110 <input type="radio" name="sex" value="Male"/>Male
111 <input type="radio" name="sex" value="female"/>female
112 </td>
113 </tr>
114
115 <tr>
116 <td>
117 Date of birth
118 </td>
119 <td>
120 <input type="text" name="birthday" size="34px" id="birthday"></input>
121 </td>
122 </tr>
123
124 <tr>
125 <td colspan="2">
126 <center>
127 <input type="submit" value="Register" />
128 </center>
129 </td>
130 </tr>
131 </table>
132 </form>
133 </td>
134 </tr>
135 </table>
136 </body>
137 </html>
Second type
Good user experience, text prompts users outside each box
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>js_before</title>
8 <script>
9 function showTips(id,info){
10 document.getElementById(id + "span").innerHTML="<font color='gray'>" + info + "</font>";
11 }
12
13 function check(id,info){
14 var uValue = document.getElementById(id).value;
15 if(uValue==""){
16 document.getElementById(id + "span").innerHTML="<font color='red'>" + info + "</font>";
17 }else{
18 document.getElementById(id + "span").innerHTML="";
19}
20}
21 </script>
22 </head>
23 <body>
24 <body>
25 <table border="1px" align="center" width="1300px" cellpadding="0px"
26 cellspacing="0px">
27 <tr>
28 <td height="600px">
29 <form action="#" method="get" name="regForm"
30 onsubmit="return checkForm()">
31 <table border="1px" width="450px" height="400px" align="center"
32 cellpadding="0px" cellspacing="0px" bgcolor="white">
33 <tr>
34 <td>Username</td>
35 <td><input type="text" name="user" size="34px" id="user"
36 onfocus="showTips('user','Username required!')"
37 onblur="check('user','Username cannot be empty!')" />
38 <span id="userspan"></span>
39 </td>
40 </tr>
41 <tr>
42 <td>Password</td>
43 <td><input type="password" name="password" size="34px"
44 id="password" onfocus="showTips('password','Password required')"
45 onblur="check('password','Password cannot be empty!')" />
46 <span id="passwordspan"></span>
47 </td>
48 </tr>
49
50 <tr>
51 <td>Confirm password</td>
52 <td><input type="password" name="repassword" size="34px"
53 id="repassword"></input></td>
54 </tr>
55
56 <tr>
57 <td>Email</td>
58 <td><input type="text" name="email" size="34px" id="email" />
59 </td>
60 </tr>
61
62 <tr>
63 <td>Name</td>
64 <td><input type="text" name="username" size="34px"
65 id="username"></input></td>
66 </tr>
67
68 <tr>
69 <td>Gender</td>
70 <td><input type="radio" name="sex" value="Male" />Male <input
71 type="radio" name="sex" value="female" />Female</td>
72 </tr>
73
74 <tr>
75 <td>Date of birth</td>
76 <td><input type="text" name="birthday" size="34px"
77 id="birthday"></input></td>
78 </tr>
79 <tr>
80 <td>Favorite games</td>
81 <td><input type="text" name="game" list="data" id="game"
82 onfocus="showTips('game','This input field is required')"
83 onblur="check('game','Please fill in this input field!')" />
84 <span id="gamespan"></span>
85
86 <datalist id="data">
87 <option value="1">1</option>
88 <option value="2">2</option>
89 <option value="3">3</option>
90 <option value="4">4</option>
91 <option value="5">5</option>
92 </datalist>
93 </td>
94
95 </tr>
96 <tr>
97 <td colspan="2">
98 <center>
99 <input type="submit" value="Register" />
100 </center>
101 </td>
102 </tr>
103 </table>
104 </form>
105 </td>
106 </tr>
107 </table>
108 </body>
109 </html>
