2017ife_yaoyao学院_task1

任务：

表单（一）单个表单项的检验

任务目的
加强对JavaScript的掌握
熟悉常用表单处理逻辑
任务描述
如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果
校验规则
1.字符数为4~16位
2.每个英文字母、数字、英文符号长度为1
3.每个汉字，中文符号长度为2
任务注意事项
要求功能实现与任务描述中完全一致
示例图仅为参考，样式不需要完全实现一致
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现

相关知识点：

控制input type=”text”的高度和宽度

input
{height:30px;/*更改input的高度*/
}<input type="text" name="username" id="username" size=40px/>

提示的切换
更换提示的时候应该将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/?就可以访问了[应该还会有更加好用的方法，这里的方法仅供参考]

代码:

<!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;}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; i<text.length;i++){if(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>名称&nbsp;&nbsp;</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>
<!--
注意：更换提示的时候应该将tr整行隐藏起来，id设在tr上，且隐藏和显示应采用以下语句document.getElementById("error2").style.display="table-row";document.getElementById("init").style.display="none";
-->

2017ife_yaoyao学院_task1相关推荐

c语言程序设计第二版第五章课后答案甘勇,郑州工程技术学院副院长甘勇来校讲学和指导工作...
12月12日,郑州工程技术学院副院长甘勇一行莅临我校讲学和指导工作.黄河交通学院评建办公室主任汤迪操.教务处处长贾宗璞,智能工程学院领导班子.主任及骨干教师参加了本次会议,会议由智能工程学院党总支书记 ...
北京计算机学院肖战,Shuai Li
name: Shuai Li job: telephoneNo: 010-82316329 postCode: 100191 officeLocation: BUAA NEW Main Buildin ...
华科计算机学院多难考,计算机学院2019年硕士研究生入学考试成绩公告
根据学校有关要求,现将计算机学院2019年硕士研究生入学考试成绩公示如下: 一.招生计划根据学校下达的招生计划见附件1. 二.考试成绩考试成绩见附件2-5. 三.调剂工作说明 1.网络空间安全学硕 ...
广西卫生职业技术学院计算机考试,广西卫生职业技术学院单招2021年春招分数线...
1.广西卫生职业技术学院 1.院单独招生工作遵循公正.公平.公开,以及程序规范.自我约束.社会监督的原则,严格实施高校招生"阳光工程" 2.学院单独招生工作实行"招考分离 ...
龙岩学院计算机二级报名时间,福建龙岩学院2015年12月计算机等级考试报名通知...
福建龙岩学院2015年12月计算机等级考试报名通知各学院: 根据上级有关文件通知,2015年12月福建省高校学生计算机应用水平等级考试开始报名,现将有关事项通知如下: 一.考试内容: 本次一.二考试 ...
中山大学计算机学院运动会,中山大学2019年运动会.PDF
中山大学2019年运动会成绩册时间:2019年11月2 日学生组团体总分名次单位名称总分 1 国际金融学院 187 2 中山医学院 123.5 3 医学院 96 4 数据科学与计算机学 ...
武汉大学计算机学院放假时间,计算机学院关于2019年学生放暑假的通知
各学生班: 根据校历,2019年7月21日至8月31日为学校放暑假时间.为加强我院学生暑假期间的教育及管理工作,现将有关事项通知如下: 一.时间安排在校普通本科生和研究生于7月21日(星期日)开始放 ...
永州科技学院有计算机专业吗,永州科技学院有哪些专业
2014年湖南科技学院广播电视编导专业-湖南科技学院主要课程: 学院简介理学院是学校为深化院系管理体制改革与加强学科.专业建设于2015年初在原数学与计算科学系和电子工程系基础上组建而成的.设有数 ...
广东海洋大学数学与计算机学院校友会,数学与计算机学院召开2020级研究生入学教育会...
为了让2020级研究生尽快适应新的学习和生活环境,10月12日上午,数学与计算机学院在第二教学楼A405会议室召开2020级研究生入学教育会.会议由院长彭小红主持.研究生导师谢仕义.肖来胜.陈入云.叶 ...

2017ife_yaoyao学院_task1

2017ife_yaoyao学院_task1

任务：

相关知识点：

代码:

2017ife_yaoyao学院_task1相关推荐

最新文章

热门文章