<!-- 声明为HTML5版本 -->
<!doctype html>
<!-- 唯一的根元素 -->
<html>
<!-- 文档的声明 -->
<head>
<!-- 声明文档内容的编码 -->
<meta charset="utf-8"/>
<!-- 声明文档的标题 -->
<title>注册</title>
<style>
.ok{
color:green;
border:1px solid green;
}
.error{
color:red;
border:1px solid red;
}
</style>
<script>
//js的函数默认都有返回值（undefined）,
//我们可以通过return声明返回值。
//校验账号
function checkCode(){
//console.log(1);
//获取元素
var text = document.getElementById("code");
var span = document.getElementById("code_msg");
//console.log(2);
//获取账号
var code = text.value;
//校验格式
var reg = /^\w{6,12}$/;
if(reg.test(code)){
//校验成功，提示变绿
span.className = "ok";
return true;
}else{
//校验失败，提示变红
span.className = "error";
return false;
}
}
//校验密码
function checkPwd(){
var input = document.getElementById("pwd");
var span = documnet.getElementById("pwd_msg");
var pwd = input.value;
var reg = /^\w{8,16}$/;
if(reg.test(input)){
span.className = "ok";
return true;
}else{
span.className = "error";
return false;
}
}
</script>
</head>
<!-- 文档的内容 -->
<body>
<form action="http://www.tmooc.cn" onsubmit=";"
onsubmit = "return checkCode()+checkPwd()==2;">
<p>
账号：
<input type = "text" id="code" onblur="checkCode();"/>
<span id="code_msg">6-12位字母、数字、下滑线</span>
</p>
<p>
密码：
<input type = "password" id="pwd" onbiur="checkPwd()"/>
<span id="pwd_msg">8-16位字母、数字、下滑线</span>
</p>
<p>
<input type = "submit" value = "注册"/>
</p>
</form>
</body>
</html>
anyi
相关分类