JavaScript-フォーム検証例
21833 ワード
フォーム検証1
<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;ivar 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("+i+"");
}
script>
select>
<select id="month">
<option value="0">-- --option>
<script type="text/javascript">
for(var i=1;i<=12;i++){
document.write("+i+"");
}
script>
select>
<select id="day">
<option value="0">-- --option>
<script type="text/javascript">
for(var i=1;i<=31;i++){
document.write("+i+"");
}
script>
select>
form>
<br/>
<input type="submit" value=" " />
body>
html>
<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;ivar 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>