2017ife_yaoyao学院_task1
2017ife_yaoyao学院_task1
任务：
表单（一）单个表单项的检验
- 任务目的
加强对JavaScript的掌握
熟悉常用表单处理逻辑
任务描述
如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果 - 校验规则
1.字符数为4~16位
2.每个英文字母、数字、英文符号长度为1
3.每个汉字，中文符号长度为2 - 任务注意事项
要求功能实现与任务描述中完全一致
示例图仅为参考，样式不需要完全实现一致
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现
相关知识点：
控制input type=”text”的高度和宽度
input { height:30px;/*更改input的高度*/ }提示的切换
更换提示的时候应该将tr整行隐藏起来，id设在tr上，且隐藏和显示应采用以下语句
document.getElementById(“error2”).style.display=”table-row”;
document.getElementById(“init”).style.display=”none”;- 判断字符是中文还是英文
中文：text.charCodeAt(i)>256
英文：text.charCodeAt(i)<=256 - github演示demo
在github项目中html代码所在的网址前加htmlpreview.github.com/?就可以访问了[应该还会有更加好用的方法，这里的方法仅供参考]
代码:
<html>
<head>
<meta charset="utf-8">
<title>yaoyao-task1title>
<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;
}
td{
padding-top:10px;
}
/*提示部分*/
#init{
font-size:14px;
color:#999;
}
#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>
function check(){
var text=document.getElementById("username").value;
var sum=0;
if(text=="")
{
document.getElementById("error2").style.display="table-row";
document.getElementById("init").style.display="none";
document.getElementById("error1").style.display="none";
document.getElementById("correct").style.display="none";
}
else
{
for(var i=0; iif (text.charCodeAt(i)>256)//是中文
{
sum=sum+2;
}
else
{
sum=sum+1;
}
}
console.log(sum);
if(sum<4||sum>16)
{
document.getElementById("error1").style.display="table-row";
document.getElementById("init").style.display="none";
document.getElementById("error2").style.display="none";
document.getElementById("correct").style.display="none";
}
else
{
document.getElementById("correct").style.display="table-row";
document.getElementById("init").style.display="none";
document.getElementById("error2").style.display="none";
document.getElementById("error1").style.display="none";
}
}
}
script>
head>
<body>
<form>
<table>
<tr>
<td>
<label>名称 label>
td>
<td>
<input type="text" name="username" id="username" size=40px/>
td>
<td>
<input type="button" id="button" onclick="check()" value="验证"/>
td>
tr>
<tr id="init">
<td>td>
<td>
<span>必填，长度为4~16个字符span>
td>
tr>
<tr id="error1">
<td>td>
<td>
<span>输入字符长度不正确span>
td>
tr>
<tr id="error2">
<td>td>
<td>
<span>姓名不能为空span>
td>
tr>
<tr id="correct">
<td>td>
<td>
<span>名称格式正确span>
td>
tr>
table>
form>
body>
html>