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

js实现用户名和密码的校验

2017-09-15 00:00 489 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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.forml.username.value=='')
{
resultObj.innerHTML = '<font color="red">用户名不能为空！</font>';
}else if(document.forml.username.value.length<5||document.forml.username.value.length>20){
resultObj.innerHTML = '<font color="red">用户名长度必须介于5-20字符串中间！</font>';
}else{
resultObj.innerHTML = '<img src="image/ok.gif">';
}
}
function focus_password(){
var resultObj = document.getElementById("result_password");
resultObj.innerHTML = '请输入你的密码';
resultObj.style.color = "gray";
}
function blur_password(){
var resultObj = document.getElementById('result_password');
if(document.forml.password.value=='')
{
resultObj.innerHTML = '<font color="red">密码不能为空！</font>';
}else if(document.forml.password.value.length<5||document.forml.password.value.length>20){
resultObj.innerHTML = '<font color="red">用户名长度必须介于5-20字符串中间！</font>';
}else{
resultObj.innerHTML = '<img src="image/ok.gif">';
}
}
</script>
</head>
<body>
<form name="forml" method="post" action="login.php">
<table width="600" border="1" bordercolor="#ccc">
<tr>
<td width="100" align="center">用户名:</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 width="100" align="center">密码:</td>
<td><input type="password" name="password" onfocus="focus_password()" onblur="blur_password()"></td>
<td width="300"><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>

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

标签： 用户密码校验

相关文章推荐

新的分享

章节导航