<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任务三十：表单（二）多个表单项的动态校验</title>
<style>
body{
40%;
margin: 50px auto;
}
label{
display: inline-block;
font-size: 16px;
font-family: "微软雅黑", sans-serif;
100px;
padding-right: 10px;
text-align: right;
}
.tip{
display: block;
font-size: 13px;
font-family: "微软雅黑", sans-serif;
margin-left: 110px;
margin-top: 4px;
color: transparent;
}
#button{
80px;
height: 30px;
color: white;
background-color: #5754ff;
border: none;
margin-left: 150px;
}
.h50{
height: 50px;
}
input{
height: 30px;
220px;
}
.right{
color: green;
}
.error{
color: red;
}
</style>
</head>
<body>
<form method="post">
<p class="h50"><label for="username">名称</label><input class="1 2" name="username" id="username" type="text"/><span class="tip username-tip">必填，长度为4-16个字符</span></p>
<p class="h50"><label for="psd">密码</label><input name="psd" id="psd" type="password"/><span class="tip psd-tip">密码为6-16位字符，支持数字,字母大小写,不能有空格</span></p>
<p class="h50"><label for="ensurePsd">密码确认</label><input name="ensurePsd" id="ensurePsd" type="password"/><span class="tip ensure-tip">再次输入相同的密码</span></p>
<p class="h50"><label for="email">邮箱</label><input name="email" id="email" type="email"/><span class="tip email-tip">输入你的常用邮箱</span></p>
<p class="h50"><label for="phone">手机号</label><input name="phone" id="phone" type="text"/><span class="tip email-tip">请输入手机号</span></p>
<input id="button" type="button" value="提交">
</form>
<script src="task.js"></script>
<script>
/**
* Created by 安超 on 2016/3/27.
*/
(function(){
var username = document.getElementById("username");
var psd = document.getElementById("psd");
var ensurePsd = document.getElementById("ensurePsd");
var email = document.getElementById("email");
var phone = document.getElementById("phone");
var button = document.getElementById("button");
var flag = 0;//用于记录几个输入框正确了
var padFlag = false;//表征原始密输入情况
var defaultValue = {
"username": username.nextElementSibling.innerText,
"psd": psd.nextElementSibling.innerText,
"ensurePsd": ensurePsd.nextElementSibling.innerText,
"email": email.nextElementSibling.innerText,
"phone": phone.nextElementSibling.innerText,
};
//名称
username.onfocus = function(){
var tipBox = this.nextElementSibling;
tipBox.style.color = "#555555";
tipBox.innerHTML = defaultValue.username;
this.onblur = function(){
var inputText = this.value.trim();
var chinese = inputText.match(/[u4e00-u9fa5]/g);
var len = (chinese === null) ? (inputText.length) : (inputText.length + chinese.length);
if(len >= 4 && len <= 16){
tipBox.innerHTML = "输入正确";
tipBox.style.color = "green";
flag++;
}else {
tipBox.innerHTML = "输入错误";
tipBox.style.color = "red";
flag--;
}
};
};
//密码
psd.onfocus = function(){
var tipBox = this.nextElementSibling;
tipBox.style.color = "#555555";
tipBox.innerHTML = defaultValue.psd;
this.onblur = function(){
var inputText = this.value.trim();;
if(/^[0-9A-Za-z]{6,16}$/.test(inputText)){
tipBox.innerHTML = "输入正确";
tipBox.style.color = "green";
padFlag = true;
flag++
}else {
tipBox.innerHTML = "输入错误";
tipBox.style.color = "red";
padFlag = false;
flag--;
}
}
};
//确认密码
ensurePsd.onfocus = function(){
var tipBox = this.nextElementSibling;console.log(tipBox);
if(!padFlag){
tipBox.innerHTML = "请先在上面输入框正确输入密码";
tipBox.style.color = "red";
return 0;
}
tipBox.innerHTML = defaultValue.ensurePsd;
tipBox.style.color = "#555555";
var psd1 = psd.value;
ensurePsd.onblur = function(){
var psd2 = this.value.trim();
if(psd1 === psd2){
tipBox.innerHTML = "输入正确";
tipBox.style.color = "green";
flag++;
}else {
tipBox.innerHTML = "输入错误";
tipBox.style.color = "red";
flag--;
}
}
}
//邮箱
email.onfocus = function(){
var tipBox = this.nextElementSibling;
tipBox.style.color = "#555555";
tipBox.innerHTML = defaultValue.email;
email.onblur = function(){
var emailText = email.value;
if(/^(w)+(.w+)*@(w)+((.w+)+)$/.test(emailText)){
tipBox.innerHTML = "输入正确";
tipBox.style.color = "green";
flag++;
}else {
tipBox.innerHTML = "输入错误";
tipBox.style.color = "red";
flag--;
}
}
};
//手机号
phone.onfocus = function(){
var tipBox = this.nextElementSibling;
tipBox.style.color = "#555555";
tipBox.innerHTML = defaultValue.phone;
this.onblur = function(){
var phoneText = phone.value;
if(/(^(13d|14[57]|15[^4,D]|17[678]|18d)d{8}|170[059]d{7})$/.test(phoneText)){
tipBox.innerHTML = "输入正确";
tipBox.style.color = "green";
flag++;
}else {
tipBox.innerHTML = "输入错误";
tipBox.style.color = "red";
flag--;
}
}
}
//确认按钮
button.onclick = function(){
if(flag !== 5){
alert("填写有误");
}else {
alert("填写正确");
}
}
})();
</script>
</body>
</html>