1 <html> 2 ????<head> 3 ????????<title>验证表单</title> 4 ????????<script type="text/javascript"> 5 ????????????function checkname(obj){ 6 ????????????????var name = obj.value; 7 ????????????????var pattern=/^[a-zA-Z]([a-zA-Z]{2,20})/; ????8 ????????????????if(name.match(pattern)==null){ 9 ????????????????????document.getElementById("user").innerHTML="<font color=‘red‘>用户名3-10位字母</font>";10 ????????????????????return false;11 ????????????????}else{12 ????????????????????document.getElementById("user").innerHTML="<font color=‘green‘>用户名合法</font>";13 ????????????????????return true;14 ????????????????} ???15 ????????????}16 ????????????function checkpass1(obj){17 ????????????????var pass1 = obj.value;18 ????????????????var div = document.getElementById("pass1");19 ????????????????if(pass1.length==6){20 ????????????????????div.innerHTML = "<font color=‘green‘>密码合法</font>"21 ????????????????}else{22 ????????????????????div.innerHTML = "<font color=‘red‘>密码不合法</font>"23 ????????????????} ???24 25 ????????????}26 ????????????function checkpass2(obj){27 ????????????????var pass2 = obj.value;28 ????????????????var pass1 = document.getElementById("pw1").value;29 ????????????????var div = document.getElementById("pass2");30 ????????????????if(pass1==pass2){31 ????????????????????div.innerHTML = "<font color=‘green‘>密码一致</font>"32 ????????????????}else{33 ????????????????????div.innerHTML = "<font color=‘red‘>密码不一致</font>"34 ????????????????} ???35 ????????????}36 ????????????function sysr(obj){ ????37 ????????????????var a = obj.value.length;38 ????????????????var b = 100-a;39 ????????????????var div = document.getElementById("sysr");40 ????????????????if(b>=0){41 ????????????????????div.innerHTML= "你还可以输入"+b+"个字符";42 ????????????????}else{43 ????????????????????div.innerHTML= "超出限制";44 ????????????????}45 ????????????} ???????????????????????46 ????????</script>47 ????48 ????</head>49 ????<body>50 ????????<h1 align="center">表单验证</h1>51 ????????<hr/>52 ????????53 ????????<div align="center">54 ????????<table border="1" cellpadding="5" cellspacing="0" name="mytable">55 ????????????<tr>56 ????????????????<td>用户名</td>57 ????????????????<td><input type="text" id="username" onblur="checkname(this)"></td>58 ????????????????<td><div id="user"><font color="red">*<font></div></td>59 ????????????</tr>60 ????????????<tr>61 ????????????????<td>密码</td>62 ????????????????<td><input type="password" id="pw1" onblur="checkpass1(this)"></td>63 ????????????????<td><div id="pass1"><font color="red">*<font></div></td>64 ????????????</tr>65 ????????????<tr>66 ????????????????<td>确认密码</td>67 ????????????????<td><input type="password" id="pw2" onblur="checkpass2(this)"></td>68 ????????????????<td><div id="pass2"><font color="red">*<font></div></td>69 ????????????</tr>70 ????????????<tr>71 ????????????????<td colspan="3" align="center">72 ????????????????????<div id="sysr">标准输入100字</div>73 ????????????????</td> ???????74 ????????????</tr>75 ????????????<tr>76 ????????????????<td>自我评价</td>77 ????????????????<td><textarea rows="5" cols="21" onkeyup="sysr(this)"></textarea></td>78 ????????????</tr>79 ????????80 ????????</table>81 ????????</div> ???????82 ????</body>83 </html>HTML--JS ?表单验证
原文地址：http://www.cnblogs.com/liuyangv/p/7989549.html