先上代码。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form表单提交</title>
<script type="text/javascript">
var flag1=false;
var flag2=false;
function display(obj){
var currentVal=$(obj.id).value;
if(currentVal=="")
{
$(obj.id).value=obj.defaultValue;
}
else{
$(obj.id).value=currentVal;
if(currentVal.length<6)
{
$("info1").innerText="用户名称太短,应为6-10个字符";
}
else if(currentVal.length>10)
{
$("info1").innerText="用户名称太长，应为6-10个字符";
}
else {
var myreg=/[a_zA_z0-9_-]+/gi;
if(!myreg.test(currentVal))
{
$("info1").innerText="用户名不能为除下划线之外的特殊字符";
}
else {
flag1=true;
}
}
}
$("b3").disabled=false;
}
function dispass(obj){
var currentVal=$(obj.id).value;
if(currentVal=="")
{
$(obj.id).value=obj.defaultValue;
}
else{
$(obj.id).value=currentVal;
if(currentVal.length<6)
{
$("info2").innerText="密码太短";
}
else if(currentVal.length>16)
{
$("info2").innerText="密码太长";
}
else {
var myreg=/[a_zA_z]+[0-9]+/gi;
if(!myreg.test(currentVal))
{
$("info2").innerText="密码应该为字母和数字的组合";
}
else {
flag2=true;
}
}
}
$("b3").disabled=false;
}
function confirm(obj){
var flag=flag1&&flag2;
if(!flag)
{
$("b3").disabled=true;
return false;
}
return true;
}
function doclear(obj)
{
var currentVal=$(obj.id).value;
if(currentVal==obj.defaultValue)
{
$(obj.id).value="";
}
else{
$(obj.id).value=currentVal;
}
}
function $(id)
{
return document.getElementById(id);
}
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
<form action="" onsubmit="return confirm(this)">
<!--value 就是默认值 可以通过 this.defaultValue来访问-->
<input type="text" value="用户邮箱/手机号/用户名" onfocus="doclear(this)" onblur="display(this)" id="b1"/><span id="info1"></span><br>
<input type="password" value="请输入密码" onfocus="doclear(this)" onblur="dispass(this)" id="b2"/><span id="info2"></span><br>
<input type="submit" value="登陆" id="b3"/><br>
</form>
</body>
</html>