网页用户名密码验证系统
程序员文章站
2022-06-13 21:04:40
...
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>登陆验证</title>
<style type="text/css">
/*验证成功的样式*/
.ok{
color:green;
border:1px solid green;
}
.error{
color:red;
border:1px solid red;
}
</style>
<script type="text/javascript">
function check_name(){
//校验账号的格式
var code=document.getElementById("code").value;
var span=document.getElementById("code_msg");
//判断账号的格式
var reg=/^\w{6,20}$/;
//格式不对要给span加上error样式，正确加上OK样式
if(reg.test(code)){
//className就是元素的class
span.className="ok";
span.innerHTML="格式正确";
return true;
}else{
span.className="error";
span.innerHTML="非法输入";
return false;
}
}
function check_pwd(){
//校验账号的格式
var pwd=document.getElementById("pwd").value;
var span=document.getElementById("pwd_msg");
//判断账号的格式
var reg=/^\w{8,16}$/;
//格式不对要给span加上error样式，正确加上OK样式
if(reg.test(pwd)){
//className就是元素的class
span.className="ok";
span.innerHTML="格式正确";
return true;
}else{
span.className="error";
span.innerHTML="非法输入";
return false;
}
}
</script>
</head>
<body>
<fieldset style="width:450px;margin:50px auto;">
<!-- action:提交地址
onsubmit form上的onsubmit事件，是表单提交事件，当提交表单时触发
onsubmit中的js，若返回值是false，则表单提交行为会被终止 若为true则表单提交 -->
<form action="http://www.sohu.com" onsubmit="return check_name()+check_pwd()==2">
<!-- onblur是光标切换事件，光标切换时触发 -->
<p>
账号：<input type="text" id="code" onblur="check_name();"/>
<span id="code_msg">6~20位字母数字组成的</span>
</p>
<p>
密码：<input type="password" id="pwd" onblur="check_pwd();"/>
<span id="pwd_msg">8-16位字母数字下划线的组合</span>
</p>
<p >
<input type="submit" value="登陆"/>
</p>
</form>
</fieldset>
</body>
</html>
上一篇： 记录一次扇贝网前端实习面试