任务二十九:表单(一)单个表单项的检验
- 面向人群:
- 初学者
- 难度:
- 简单
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
任务目的
- 加强对JavaScript的掌握
- 熟悉常用表单处理逻辑
任务描述
- 如示例图中所示,在页面中实现一个输入框与按钮,要求点击验证按钮后,对输入框中内容进行格式校验,并在其下方显示校验结果
- 校验规则:
- 1.字符数为4~16位
- 2.每个英文字母、数字、英文符号长度为1
- 3.每个汉字,中文符号长度为2
任务注意事项
- 要求功能实现与任务描述中完全一致
- 示例图仅为参考,样式不需要完全实现一致
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 不允许借助任何第三方组件库实现
任务协作建议
- 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
- 各自完成任务实践
- 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
- 相互讨论,最后合成一份组内最佳代码进行提交
在线学习参考资料
树林美丽、幽暗而深邃,但我有诺言尚待实现,还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特