blur 事件 表单认证
2017-05-24 本文已影响0人
羞答答_aff1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
width: 300px;
padding: 10px;
border:1px solid #ccc;
line-height: 18px;
font-size: 16px;
}
input[type = "submit"]{
width: 322px;
background: #f5f5f5;
}
</style>
</head>
<body>
<hr>
<form action="1.php" name="myform" onsubmit="return checkForm()">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" onblur="checkUsername()" value ="请输入用户名" style= "color:#ccc" onfocus=" this.value = '';this.style.color ='#000'";></td>
<td id="username_info"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" onblur="checkEmail()"></td>
<td id="email_info"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" onblur="checkPwd()"></td>
<td id="pwd_info"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repwd" onblur="checkRepwd()"></td>
<td id="repwd_info"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
<script>
function checkUsername(){
var value = document.myform.username.value;
var td = document.getElementById('username_info');
if(value.match(/^\w{6,12}$/)=== null){
td.innerHTML = '用户名必须是6-12位数字，字母，下划线';
td.style.color = 'red';
return false;
}else{
td.innerHTML = '用户名可用';
td.style.color = 'green';
return true;
}
}
function checkEmail(){
var email = document.myform.username.value;
var td = document.getElementById('email_info');
if(email.match(/^[\w-]+@[\w-]+(\.\w+){1,3}$/)=== null){
td.innerHTML = '格式不正确';
td.style.color = 'red';
return false;
}else{
td.innerHTML = '邮箱可用';
td.style.color = 'green';
return true;
}
}
function checkPwd(){
var pwd = document.myform.pwd.value;
var td = document.getElementById('pwd_info');
if(pwd.length < 6 || pwd.length >18){
td.innerHTML = '密码必须是6-18位';
td.style.color = 'red';
return false;
}else{
td.innerHTML = '密码可用';
td.style.color = 'green';
return true;
}
}
function checkpRewd(){
var pwd = document.myform.pwd.value;
var repwd = document.myform.repwd.value;
var td = document.getElementById('repwd_info');
if(pwd != repwd){
td.innerHTML = '两次密码不一致';
td.style.color = 'red';
return false;
}else{
td.innerHTML = '两次密码一样';
td.style.color = 'green';
return true;
}
}
function checkForm(){
return checkUsername() && checkEmail() && checkPwd() && checkRepwd();
}
</script>
</body>
</html>
