实例:表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS实例_表单验证</title>
</head>
<script type="text/javascript">
//username模块
function focus_username() {//username表单获取焦点时的函数
var resultObj = document.getElementById("result_username");//获取id=result_username的对象
resultObj.style.color = "gray";//提示信息单元格的颜色
resultObj.innerHTML = "请输入你的用户名";
document.form1.usetname.style = "border:1px solid red;background-color:#f0f0f0";//更改边框颜色
}
function blur_username() {//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 = "<font color ='red'>用户名长度必须介于5-20字符之间</font>";
return false;
} else {
resultObj.innerHTML = "<img src='images/th11.jpg'/>";
return true;
}
}
//password模块
function focus_user_password() {
var resultObj = document.getElementById("result_password");
resultObj.style.color = "gray";
resultObj.innerHTML = "请输入你的密码";
document.form1.focus_user_password.style = "border:1px solid red;background-color:#f0f0f0";
}
function blur_user_password() {
var resultObj = document.getElementById("result_password");
//密码验证
if (document.form1.user_password.value.length < 5 || document.form1.user_password.value.length > 20) {
resultObj.innerHTML = "密码的长度必须介于5-20之间";
return false;
} else if (document.form1.user_password.value == "") {
resultObj.inner = "密码不能为空";
return false;
} else {
resultObj.innerHTML = "<img src='images/th11.jpg' />";
return true;
}
}
//form提交前最后的验证函数
function chlick_form() {
//最终验证是否可以提交
if (blur_user_password() && blur_username()) {
alert("验证成功,正在上传");
return true;
}
alert("用户名或密码输入不合法");
return false;
}
</script>
<body>
<form name="form1" method="post" action="login.php" οnsubmit="return chlick_form()">
<table width="500" border="1" align="center" rules="all">
<tr>
<td>用户名</td>
<td><input type="text" name="username" οnfοcus="focus_username()" οnblur="blur_username()" /></td>
<td>
<div id="result_username"></div>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="user_password" οnfοcus="focus_user_password()"
οnblur="blur_user_password()" /></td>
<td>
<div id="result_password"></div>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<!-- 合并二个单元格 -->
<input type="submit" value="提交表单" />
<input type="reset" value="重新填写" />
</td>
</tr>
</table>
</form>
</body>
</html>
显示效果如下:
合法输入的情况:
不合法输入的情况: