WEB前端教程：表单

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

单个表单项的检验

课程目标

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

阅读

编码

如示例图 (opens new window)中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果校验规则：

字符数为 4~16 位
每个英文字母、数字、英文符号长度为 1
每个汉字，中文符号长度为 2

注意事项

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

多个表单项的动态校验

课程目标

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

阅读

编码

如示例图 (opens new window)中所示，基于上一个任务，在页面中添加多个表单要求

表单获得焦点时，下方显示表单填写规则
表单失去焦点时校验表单内容
校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”

注意事项

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

表单优化

鼠标指针进入文本框时自动获得焦点并选择
鼠标左键单击文本标签，对应文本框自动清空内容
点击提交按钮之后，如果验证没通过，自动聚焦于第一个没通过的表单控件
实现邮件预填充,当用户开始输入@键的时候就会出现这些常见的域名,如示例图(opens new window)
用户输入之后，按下 enter 回车，自动提交表单
用户频繁点击提交按钮时，实现函数防抖，只执行一次提交

注意事项

要求功能实现与任务描述中完全一致
实现中，尽可能考虑代码的可读性和可复用性
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现

联动

课程目标

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

阅读

编码一

如示例图 (opens new window)中所示，在页面中完成两个单选框，切换单选框的不同选项时下方显示的表单随之切换。

当选择在校生时，出现两个 select 下拉菜单，一个选择城市，一个选择学校，当选择非在校生时，出一个文本输入框
学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学，当城市发生变化时，学校一起发生变化
城市及学校的数据随意编造即可，无需真实完整

编码二

如示例图 (opens new window)中所示,实现一个省市区三级联动下拉框选择

一开始只显示省份选择下拉列表框，选中省份后，然后出现城区下拉列表框，并且城市都属于选中省份，选中城市之后，出现区下拉列表框
城市及学校的数据保存为 json，可以单独存在一个 json 文件中，内容可以不必完全覆盖全国，可以只选取一部分

var provice = [
  {
    name: "北京市",
    city: [
      {
        name: "北京市",
        districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
      }
    ]
  },
  {
    name: "天津市",
    city: [
      {
        name: "天津市",
        districtAndCounty: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "蓟县", "宁河县", "芦台镇", "静海县", "静海镇"]
      }
    ]
  },
  {
    name: "上海市",
    city: [
      {
        name: "上海市",
        districtAndCounty: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区?", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县", "城桥镇"]
      }
    ]
  },
  {
    name: "重庆市",
    city: [
      {
        name: "重庆市",
        districtAndCounty: ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "垫江县", "武隆县", "丰都县", "城口县", "梁平县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县", "酉阳土家族苗族自治县", "秀山土家族苗族自治县"]
      }
    ]
  },
]

注意事项

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

实现表单自动生成工厂

课程目标

加强对 JavaScript 的掌握
熟悉常用表单处理逻辑
学习如何模块如何设计，不同模块间如何尽量解耦

阅读

编码

实现以 JavaScript 对象的方式定义表单及验证规则表单配置参考示例如下：（不需要一致，仅为参考）

{
    label: '名称',                    // 表单标签
    type: 'input',                   // 表单类型
    validator: function () {...},    // 表单验证规
    rules: '必填，长度为4-16个字符',    // 填写规则提示
    success: '格式正确',              // 验证通过提示
    fail: '名称不能为空'               // 验证失败提示
}

基于该配置项，实现一套逻辑，可以自动生成表单的展现、交互、验证
使用你制作的表单工厂，在一个页面上创建两套样式不同的表单

注意事项

实现中，尽可能考虑代码的可读性和可复用性
尽量时表单配置、生成、样式、验证几个逻辑之间的耦合度足够低
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-03 11:37
阅读 ( 700 )
分类：WEB前端开发

WEB前端教程：表单

单个表单项的检验

课程目标

阅读

编码

多个表单项的动态校验

课程目标

阅读

编码

表单优化

联动

课程目标

阅读

编码一

编码二

实现表单自动生成工厂

课程目标

阅读

编码

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »