2017ife_yaoyao学院_task2
任务：
表单（二）多个表单项的动态校验
任务目的
加强对JavaScript的掌握
熟悉常用表单处理逻辑任务描述
如示例图中所示，基于上一个任务（任务29），在页面中添加多个表单
要求:
1.表单获得焦点时，下方显示表单填写规则
2.表单失去焦点时校验表单内容
3.校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
4.校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
5.点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”任务注意事项
要求功能实现与任务描述中完全一致
示例图仅为参考，样式不需要完全实现一致
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现相关知识点：
1.统一每个部分中init,error1,error2,correct的样式
把css中的id改为类2.用classname来查找元素以及使用
var e_init=document.getElementsByClassName("init "+e_name);//寻找元素的某种方法 e_init[0].style.display="table-row";3.每一个input设置onfocus和onblur,并传入此element
<input type="text" name="username" id="username" size=40px onfocus="init(this)" onblur="check(this)"/><!--this,指代特定元素-->4.邮箱格式使用正则表达式确认
var rule1=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; if (!rule1.test(text)){ someword here; }5.使用数组进行每一个部分的flag的确认
var arr=new Array(0,0,0,0,0);6.填密码的时候要将确认密码一栏清空
else if(e_name=="password") { document.getElementById("confirm").value=""; }代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yaoyao-task1</title>
<style>
form{
margin-left:50px;
margin-top:50px;
}
label{
font-size:18px;
font-weight:bold;
}
input{
height:30px;/*更改input的高度*/
border-radius:8px;
border:1px #999 solid;
}
#button{
background-color:blue;
color:white;
border:1px blue solid;
border-radius:4px;
height:34px;
font-size:18px;
width:80px;
float:right;
}
td{
padding-top:10px;
}
/*提示部分*/
.init{
font-size:14px;
color:#999;
display:none;
}
.error1{
font-size:14px;
color:red;
display:none;
}
.error2{
font-size:14px;
color:red;
display:none;
}
.correct{
font-size:14px;
color:green;
display:none;
}
</style>
<script>
var user_password="";//全局变量
var arr=new Array(0,0,0,0,0);
function init(e){
var e_name=e.name;
console.log(e_name);
var e_init=document.getElementsByClassName("init "+e_name);//寻找元素的某种方法
var e_error1=document.getElementsByClassName("error1 "+e_name);
var e_error2=document.getElementsByClassName("error2 "+e_name);
var e_correct=document.getElementsByClassName("correct "+e_name);
console.log(e_init);
e_init[0].style.display="table-row";
e_error2[0].style.display="none";
e_error1[0].style.display="none";
e_correct[0].style.display="none";
}
function check(e){
var e_name=e.name;
console.log(e_name);
var e_init=document.getElementsByClassName("init "+e_name);
var e_error1=document.getElementsByClassName("error1 "+e_name);
var e_error2=document.getElementsByClassName("error2 "+e_name);
var e_correct=document.getElementsByClassName("correct "+e_name);
var text=e.value;
console.log(text);
var sum=0;//存放长度
if(text=="")
{
e_error2[0].style.display="table-row";
e_init[0].style.display="none";
e_error1[0].style.display="none";
e_correct[0].style.display="none";
}
else
{
//username
if(e_name=="username")
{
for(var i=0; i<text.length;i++)
{
if(text.charCodeAt(i)>256)//是中文
{
sum=sum+2;
}
else
{
sum=sum+1;
}
}
console.log(sum);
if(sum<4||sum>16)
{
e_error1[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_correct[0].style.display="none";
}
else
{
e_correct[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_error1[0].style.display="none";
arr[0]=1;
}
}
else if(e_name=="password")
{
document.getElementById("confirm").value="";
user_password=text;
if(text.length<6)
{
e_error1[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_correct[0].style.display="none";
}
else
{
e_correct[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_error1[0].style.display="none";
arr[1]=1;
}
}
else if(e_name=="confirm")
{
if(text!=user_password)
{
e_error1[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_correct[0].style.display="none";
}
else
{
e_correct[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_error1[0].style.display="none";
arr[2]=1;
}
}
else if(e_name=="email")
{
var rule1=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (!rule1.test(text)){
e_error1[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_correct[0].style.display="none";
}
else
{
e_correct[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_error1[0].style.display="none";
arr[3]=1;
}
}
else//phone
{
if(text.length!=11)
{
e_error1[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_correct[0].style.display="none";
}
else
{
e_correct[0].style.display="table-row";
e_init[0].style.display="none";
e_error2[0].style.display="none";
e_error1[0].style.display="none";
arr[4]=1;
}
}
}
}
function checkresult()
{
var flag=1;
for(var i=0; i<5; i++)
{
if(arr[i]!=1)
{
flag=0;
}
}
if(flag==1)
alert("提交成功");
else
alert("提交失败");
}
</script>
</head>
<body>
<form>
<table>
<!--姓名-->
<tr>
<td>
<label>名称 </label>
</td>
<td>
<input type="text" name="username" id="username" size=40px onfocus="init(this)" onblur="check(this)"/><!--this,指代特定元素-->
</td>
</tr>
<tr class="init username">
<td></td>
<td>
<span>必填，长度为4~16个字符</span>
</td>
</tr>
<tr class="error1 username">
<td></td>
<td>
<span>输入字符长度不正确</span>
</td>
</tr>
<tr class="error2 username">
<td></td>
<td>
<span>姓名不能为空</span>
</td>
</tr>
<tr class="correct username">
<td></td>
<td>
<span>名称格式正确</span>
</td>
</tr>
<!--密码-->
<tr>
<td>
<label>密码 </label>
</td>
<td>
<input type="password" name="password" id="password" size=40px onfocus="init(this)" onblur="check(this)"/>
</td>
</tr>
<tr class="init password">
<td></td>
<td>
<span>必填，密码长度应为6位及以上</span>
</td>
</tr>
<tr class="error1 password">
<td></td>
<td>
<span>输入密码长度不正确</span>
</td>
</tr>
<tr class="error2 password">
<td></td>
<td>
<span>密码不能为空</span>
</td>
</tr>
<tr class="correct password">
<td></td>
<td>
<span>密码可用</span>
</td>
</tr>
<!--确认密码-->
<tr>
<td>
<label>密码确认 </label>
</td>
<td>
<input type="password" name="confirm" id="confirm" size=40px onfocus="init(this)" onblur="check(this)"/>
</td>
</tr>
<tr class="init confirm">
<td></td>
<td>
<span>再次输入相同密码</span>
</td>
</tr>
<tr class="error1 confirm">
<td></td>
<td>
<span>输入密码不正确,请输入相同密码</span>
</td>
</tr>
<tr class="error2 confirm">
<td></td>
<td>
<span>确认密码不能为空</span>
</td>
</tr>
<tr class="correct confirm">
<td></td>
<td>
<span>密码输入一致</span>
</td>
</tr>
<!--邮箱-->
<tr>
<td>
<label>邮箱 </label>
</td>
<td>
<input type="text" name="email" id="email" size=40px onfocus="init(this)" onblur="check(this)"/>
</td>
</tr>
<tr class="init email">
<td></td>
<td>
<span>请输入邮箱，格式为example@example.com</span>
</td>
</tr>
<tr class="error1 email">
<td></td>
<td>
<span>邮箱格式错误</span>
</td>
</tr>
<tr class="error2 email">
<td></td>
<td>
<span>邮箱不能为空</span>
</td>
</tr>
<tr class="correct email">
<td></td>
<td>
<span>邮箱格式正确</span>
</td>
</tr>
<!--手机-->
<tr>
<td>
<label>手机 </label>
</td>
<td>
<input type="text" name="phone" id="phone" size=40px onfocus="init(this)" onblur="check(this)"/>
</td>
</tr>
<tr class="init phone">
<td></td>
<td>
<span>请输入11位手机号码</span>
</td>
</tr>
<tr class="error1 phone">
<td></td>
<td>
<span>手机号码输入错误</span>
</td>
</tr>
<tr class="error2 phone">
<td></td>
<td>
<span>手机号码不能为空</span>
</td>
</tr>
<tr class="correct phone">
<td></td>
<td>
<span>手机格式正确</span>
</td>
</tr>
<!--提交按钮-->
<tr>
<td></td>
<td>
<input type="button" id="button" onclick="checkresult()" value="验证"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<!--
注意：更换提示的时候应该将tr整行隐藏起来，id设在tr上，且隐藏和显示应采用以下语句
document.getElementById("error2").style.display="table-row";
document.getElementById("init").style.display="none";
-->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
