标签：javascript 表单验证 实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单验证</title>
<script type="text/javascript">
//用户名非空，长度为6-14，只能包含数字、字母、下划线
function checkUsername(){
var username=document.getElementById("username").value;
var usernameinfo=document.getElementById("usernameinfo");
//alert(username.length);
for(var i=0;i<username.length;i++){
var s=username.toLowerCase().substring(i,i+1);
if(!(s>=0&&s<=9)&&!(s>="a"&&s<="z")&&(s!="_")){
usernameinfo.innerHTML="用户名只能包含数字、字母、下划线!";
usernameinfo.style.color="#f00";
}else{
usernameinfo.innerHTML="";
}
}
if(username==""){
usernameinfo.innerHTML="用户名不能为空！";
usernameinfo.style.color="#f00";
}else if(username.length<6||username.length>14){
usernameinfo.innerHTML="用户名长度在6-14之间！";
usernameinfo.style.color="#f00";
}else{
usernameinfo.innerHTML="";
}
}
</script>
</head>
<body>
<form action="success.html" method="post">
名字：<input type="text" id="username" onblur="checkUsername();"/><span id="usernameinfo"></span><br/>
出生日期：
<select id="year">
<option value="0">--年--</option>
<script type="text/javascript">
for(var i=1900;i<=new Date().getFullYear();i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>
<select id="month">
<option value="0">--月--</option>
<script type="text/javascript">
for(var i=1;i<=12;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>
<select id="day">
<option value="0">--日--</option>
<script type="text/javascript">
for(var i=1;i<=31;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>
</form>
<br/>
<input type="submit" value="注册" />
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单验证</title>
<script type="text/javascript">
//校验输入
function checkInput(){
var flag=false;
var username=$("username").value;
var pwd=$("pwd").value;
var repwd=$("repwd").value;
var email=$("email").value;
if(username==""){
alert("用户名不能为空！");
}else if(pwd==""){
alert("密码不能为空！");
}else if(pwd.length<6){
alert("密码必须大于6位");
}else if(pwd!=repwd){
alert("密码不一致！");
}else if(email.indexOf("@")==-1 ||email.indexOf(".")==-1){
alert("邮箱格式不正确！");
}else{
flag=true;
}
//限定用户名不能包含数字
for(var i=0;i<username.length;i++){
var s=username.substring(i,i+1);
if(!isNaN(s)){
alert("用户名不能包含数字！")
return false;
}
}
return flag;
}
//获取焦点时清除原内容
function clearUsername(){
var username=$("username");
username.style.border="1px solid #f00";
if(username.value=="请输入正确的用户名"){
username.value="";
}
}
//失去焦点时检验用户名
function checkUsername(username){
username.style.border="";
if(username.value==""){
$("usernameinfo").style.font="normal 15px 宋体";
$("usernameinfo").style.color="#f00";
$("usernameinfo").innerHTML="用户名不能为空";
username.focus();
}else if(username.value.length>14||username.value.length<6){
$("usernameinfo").style.font="normal 15px 宋体";
$("usernameinfo").style.color="#F00";
$("usernameinfo").innerHTML="用户名长度必须在6-14之间！";
//username.select();//此代码在IE和Chrome中好使，在Firefox中不好使
//匿名函数
setTimeout(function(){username.select();},0);
}else{
$("usernameinfo").innerHTML="";
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="success.html" method="post" onsubmit="return checkInput();">
<table border="0" cellpadding="0" cellspacing="0" width="600px">
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="userbname" id="username" value="请输入正确的用户名" onfocus="clearUsername()" onblur="checkUsername(this)"/><span id="usernameinfo"></span></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="pwd" id="pwd"/></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" name="repwd" id="repwd"/></td>
</tr>
<tr>
<td align="right">电子邮箱：</td>
<td><input type="text" name="email" id="email"/><br/></td>
</tr>
<tr>
<td></td>
<td> <input type="submit" value="注册"/> <input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>标签：javascript 表单验证 实例
原文地址：http://blog.csdn.net/wangzi11322/article/details/45287967
