<!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>
blur 事件 表单认证
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 1:ng-change = " 方法名( ) " 当元素内容发生改变,执行方法。 PS:用ng-model =...
- 1、jQuery表单事件之blur与focus事件: focusin事件与focusout事件,同样用于处理表单焦...
- 表单事件,主要是对表单元素获得焦点、失去焦点和内容改变时做出反应。 本文目录: focus(); blur(); ...
- SpringSecurity核心功能 认证(你是谁) 授权(你能干什么) 攻击防护(防止伪造身份) 内容简介 Sp...
- 1.将像素point由point所在视图转换到目标视图view中,返回在目标视图view中的像素值 - (CGPo...