标签：classname 对象 cli mes put border col type lse
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: red;
}
.hw{
border:1px solid red;
}
</style>
<script type="application/javascript">
/*
onblur()事件: 失去焦点事件
function test1()
{
alert("我刚才失去焦点了!!!");
}
*/
//用户名文本框 失去焦点时 用验证: 7-14任意字符
function checkName()
{
var unameText=document.getElementById("userNameId");//获取输入用户名的文本框
var unameSpan=document.getElementById("nameError_span");//获取用户名的错误提示信息
var reg=/^.{7,14}$/;
if(!reg.test(unameText.value))
{
unameSpan.innerHTML="<img src=‘img/error_Picture.jpg‘>用户名不合法!"
unameText.className="hw";
return;
}
else
{
unameSpan.innerHTML="<img src=‘img/right_Pictrue.jpg‘>"
unameText.className="";
}
}
//密码文本框 失去焦点时 用验证: 6-14任意字符
function checkPass()
{
var upassText=document.getElementById("userPassId");//获取输入密码的密码文本框
var upassSpan=document.getElementById("passError_span");//获取密码的错误提示信息
var reg=/^.{6,14}$/;
if(!reg.test(upassText.value))
{
upassSpan.innerHTML="<img src=‘img/error_Picture.jpg‘>密码不合法!";
upassText.className="hw";
return;
}
else
{
upassSpan.innerHTML="<img src=‘img/right_Pictrue.jpg‘>";
upassText.className="";
}
}
function test1()
{
//1.获取文档中的DOM对象
var myForm=document.getElementById("myForm");//获取表单
var unameText=document.getElementById("userNameId");//获取输入用户名的文本框
var upassText=document.getElementById("userPassId");//获取输入密码的密码文本框
var unameSpan=document.getElementById("nameError_span");//获取用户名的错误提示信息
var upassSpan=document.getElementById("passError_span");//获取密码的错误提示信息
var userName_reg=/^.{7,14}$/;
var userPassword_reg=/^.{6,14}$/;
//2.验证(要改样式)
//用户名:7-14任意字符
if(!userName_reg.test(unameText.value))
{
unameSpan.innerHTML="<img src=‘img/error_Picture.jpg‘>用户名不合法!"
unameText.className="hw";
//return;
}
else
{
unameSpan.innerHTML="<img src=‘img/right_Pictrue.jpg‘>"
unameText.className="";
}
//密码:6-14任意字符
if(!userPassword_reg.test(upassText.value))
{
upassSpan.innerHTML="<img src=‘img/error_Picture.jpg‘>密码不合法!";
upassText.className="hw";
return;
}
else
{
upassSpan.innerHTML="<img src=‘img/right_Pictrue.jpg‘>";
upassText.className="";
}
//3.提交表单
myForm.submit();
}
</script>
</head>
<body>
<!--
<input type="text" onblur="test1();">
-->
<form action="http://taobao.com" id="myForm">
用户名: <input type="text" id="userNameId" name="userName" onblur="checkName();"><span id="nameError_span" ></span>
<br>密码:<input type="password" id="userPassId" name="userPassword" onblur="checkPass();"><span id="passError_span" ></span>
<br><input type="button" value="注册" onclick="test1();">
</form>
</body>
</html>
标签：classname 对象 cli mes put border col type lse
原文地址：https://www.cnblogs.com/hanlinxueyuan/p/9184390.html
