目录

  • 1 HTML(4学时)
    • 1.1 实验目的和要求
    • 1.2 题目1:个性化网站设计
    • 1.3 题目1-9:百度搜索
    • 1.4 题目1-10:百度图库搜索
  • 2 CSS(4学时)
    • 2.1 实验目的和要求
    • 2.2 题目1:小米扫码
    • 2.3 题目2:仿写微信导航栏
    • 2.4 选修:保卫钓鱼岛
    • 2.5 选修:CSS3动画
  • 3 JavaScript(6学时)
    • 3.1 实验目的和要求
    • 3.2 题目1:多彩网页时钟
    • 3.3 题目2:金额转换
    • 3.4 题目3:计算器
    • 3.5 题目4:表单验证
    • 3.6 题目5:动态相册
  • 4 Ajax(4学时)
    • 4.1 实验目的和要求
    • 4.2 题目1:TXT数据请求
    • 4.3 题目2:XML数据请求
    • 4.4 题目3:JSON数据请求
    • 4.5 选做:多级下拉列表
  • 5 jQuery(4学时)
    • 5.1 实验目的和要求
    • 5.2 题目1:实现按钮点击
    • 5.3 题目2:十大名画
    • 5.4 选做:jQuery动画
  • 6 HTML5(2学时)
    • 6.1 实验目的和要求
    • 6.2 题目1:新元素练习
    • 6.3 题目2:绘制五星红旗
    • 6.4 题目3:简易播放器
  • 7 自律思政专题
    • 7.1 法律法规
    • 7.2 行业标准
    • 7.3 道德规范
题目4:表单验证

实验内容

  1. 使用JavaScript验证表单内容,要求如下。

  2. 姓名不能为空,且不能超过10位;

  3. 年龄必须是正整数,且在1-150之间;

  4. 密码不能为空,且不能少于6位;

  5. 确认密码不能为空,且必须和密码一致;

  6. 手机号码不能为空,且必须为1开头的11位数字。

  7. 每个输入框,在用户输入完毕,值被改变且失去焦点之后检测数据是否合法;

  8. 直接点击“注册”按钮,在注册提交之前也能够进行数据检测。

    数据校验成功效果图:

    提示:输入框后面的图片可以在阿里矢量库中获得。



参考技术:

  1. JS获取网页元素的值;

  2. JS事件onchange和onsubmit;

  3. JS内置函数isNaN,字符串判断以及正则表达式;

  4. JS修改文本值,JS插入图像节点。