您的位置：首页 > Web前端 > JavaScript

原生js表单验证代码

2015-12-27 13:33 666 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航