表单验证练习代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <!doctype html>
<html>
<head>
<title>JavaScript</title>
<style>
span{
color:red;
font-size:12px;
}
</style>
<script>
window.onload=function(){
var name=document.getElementById("username");
var namespan=document.getElementById("error1");
name.value="";
name.onkeyup=function(){
var namevalue=name.value;
namevalue=namevalue.trim();
if(namevalue.length==0)
{
namespan.innerText="用户名不能为空";
}
else
{
if(name.value.length<6||name.value.length>14)
{
namespan.innerText="用户名应该在6到14位之间";
}
else
{
namespan.innerText="";
var regExp=/^[A-Za-z0-9_]+$/;
if(!regExp.test(namevalue))
{
namespan.innerText="用户名只能由数字字母下划线构成";
}
else
{
namespan.innerText="";
}
}
}
}
var pwd2=document.getElementById("userpwd2");
var pwd2span=document.getElementById("error2");
pwd2.onblur=function(){
var pwd=document.getElementById("userpwd");
if(pwd2.value!=pwd.value)
{
pwd2span.innerText="密码不匹配";
}
else
{
pwd2span.innerText="";
}
}
var sub=document.getElementById("submit1");
var form =document.getElementById("userform");
sub.onclick=function(){
var userform=document.getElementById("userform");
pwd2.focus();
pwd2.blur();
if(pwd2span.innerText!=""||namespan.innerText!="")
{
alert("请输入正确格式");
}
else
{
form.submit();
}
}
}
</script>
</head>
<body>
<form id="userform" action="http://localhost:8080/jd/sava" method="get">
用户名<input type="text" name="username" id="username"/><span id="error1">用户名不能为空</span><br>
密码<input type="text" name="userpwd" id="userpwd"/><br>
确认密码<input type="text" id="userpwd2"/><span id="error2"></span><br>
邮箱<input type="text" name="email" id="email"/><br><span id="error3"></span>
<input type="button" value="注册" id="submit1"/>
<input type="reset" value="重置">
</form>
</body>
</html>
|
注意id名类似的尽量不要起属性名，要不可能在调用方法时报错，比如上面的submit方法。