原生js表单验证代码

最新推荐文章于 2024-06-10 14:51:04 发布

原创最新推荐文章于 2024-06-10 14:51:04 发布 · 664 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #表单验证 #javascript

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
function focus_username(){
var resultObj=document.getElementById("result_username");
resultObj.innerHTML="请输入用户名";
resultObj.style.color="gray";
}
function blur_username(){
var resultObj=document.getElementById("result_username");
if(document.form1.username.value==""){
resultObj.innerHTML="用户名不能为空！";
resultObj.style.color="red";
return false;
}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20){
resultObj.innerHTML="用户名长度介于5-20个字符之间！";
resultObj.style.color="red";
return false;
}else{
resultObj.innerHTML="<img src='image/right.jpg' width='18' />";
return true;
}
}
function focus_userpwd(){
var resultObj=document.getElementById("result_userpwd");
resultObj.innerHTML="请输入密码";
resultObj.style.color="gray";
}
function blur_userpwd(){
var resultObj=document.getElementById("result_userpwd");
if(document.form1.userpwd.value==""){
resultObj.innerHTML="密码不能为空！";
resultObj.style.color="red";
return false;
}else if(document.form1.userpwd.value.length<5 || document.form1.userpwd.value.length>20){
resultObj.innerHTML="密码长度介于5-20个字符之间！";
resultObj.style.color="red";
return false;
}else{
resultObj.innerHTML="<img src='image/right.jpg' width='18' />";
return true;
}
}
function checkForm(){
flag_username=blur_username();
flag_userpwd=blur_userpwd();
if(flag_username==true && flag_userpwd==true){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php" onsubmit="return checkForm()">
<table width="600" border="1" bordercolor="#ccc" align="center" rules="all" cellpadding="5">
<tr>
<td width="100" align="right">用户名：</td>
<td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
<td width="300"><div id="result_username"> </div></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>
<td><div id="result_userpwd"> </div></td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<input type="submit" value="提交表单" />
<input type="reset" value="重新填写"> </div>
</td>
</tr>
</table>
</form>
</body>
</html>