任务二十九：表单（一）单个表单项的检验

面向人群：: 初学者
难度：: 简单

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

加强对JavaScript的掌握
熟悉常用表单处理逻辑

任务描述

如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果
校验规则：
- 1.字符数为4~16位
- 2.每个英文字母、数字、英文符号长度为1
- 3.每个汉字，中文符号长度为2

任务注意事项

要求功能实现与任务描述中完全一致
示例图仅为参考，样式不需要完全实现一致
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现

任务协作建议

团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
各自完成任务实践
交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

Web相关名词通俗解释
MDN HTML入门
慕课HTML+CSS基础教程视频
JavaScript 表单验证
HTML表单指南

任务二十九：表单（一）单个表单项的检验相关推荐

antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证
一.项目要求 1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功二.思路 ...
Struts2 表单和非表单标签
学习内容 Struts 2表单标签 Struts 2非表单标签能力目标熟练使用Struts 2表单标签开发表单熟练使用Struts 2非表单标签本章简介上一章讲述了ognl和Struts2标 ...
php显示html表单内容,HTML表单是什么？HTML表单内容的详细介绍（附代码）
HTML 表单是用于搜集不同类型的用户输入的,表单是一个包含表单元素的区域:表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素:表单使用表单标签( )定义. 一.介 ...
ajax合并表单,ajax。表单
JQuery读书笔记--JQuery-Form中的ajaxForm和ajaxSubmit的区别 JQuery中的ajaxForm和ajaxSubmit使用差不多功能也差不多.很容易误解. 按照作者的解 ...
php ci提交表单验证,ci表单验证代码
概述这是只考虑php对表单数据的接收处理.至于js部分以前会结合validate来讲解下在解释 CodeIgniter 的数据验证处理之前,让我们先描述一下一般的情况: 一个表单显示了. 你填写并 ...
html表单自动提交表单提交表单数据类型,表单
表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框. ...
计算机程序设计表单,表单模板和表单简介
表单模板的组件表单模板是单个文件包含多个支持文件,例如定义表单模板上的控件的显示方式,显示在表单模板的图形文件的文件和编程启用自定义窗体中的行为的文件模板.为表单文件统称以下支持的文件.在设计表单模 ...
表单的补充——表单域
表单域对象表单域包含了文本框.多行文本框.密码框.隐藏域.复选框.单选框和下拉选择框等,用于采集用户的输入或选择的数据文本框文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简 ...
BootStrap 智能表单系列五表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...