04004_使用JavaScript完成注册表单数据校验

1、需求分析

  (1)用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验);

  (2)前端校验防君子不防小人。

2、技术分析

  (1)什么是JavaScript?

    ①JavaScript被设计用来向HTML页面添加交互行为;

    ②JavaScript是一种脚本语法(脚本语法是一种轻量级的编程语言);

    ③JavaScript由数行可执行计算机代码组成;

    ④JavaScript通常被直接嵌入HTML页面;

    ⑤JavaScript是一种解释性语言,代码不进行预编译;

    ⑥所有人无需购买许可证均可使用JavaScript ;

    ⑦Java和JavaScript没有关系。

  (2)JavaScript的作用

    ①HTML:它是整个网站的骨架;

    ②CSS:它是对整个网站骨架的内容进行美化(修饰);

    ③JavaScript:它能够让整个页面具有动态效果。

  (3)JavaScript的组成部分

    ①ECMAScript:它是整个JavaScript的核心,包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等);

    ②DOM:文档对象模型,包含整个html页面的内容;

    ③BOM:浏览器对象模型:包含整个浏览器相关内容。

  (4)JavaScript的语法

    ①区分大小写;

    ②变量是弱类型的;

    ③每行结尾的分号可有可无,建议写上;

    ④注释与Java、PHP等语言相同。

  (5)JavaScript的变量

    ①变量可以不用声明,变量是弱类型;

    ②同一使用var类定义;

    ③定义变量的时候不要使用关键字和保留字。

  (6)JavaScript 数据类型

    ①JavaScript数据类型分为原始数据类型和引用数据类型;

    ②原始数据类型:String、number、boolean、null、undefide ;

    ③引用数据类型:Array、Boolean、Date、Math、Number、String、ReqExp 。

  (7)JavaScript运算符

    ①其他运算符与Java大体一致,需要注意其等性运算符;

    ②== 它在做比较的时候会进行自动转换;

    ③===它在作比较的时候不会进行自动转换。

  (8)JavaScript语句

    所有语句与Java大体一致。

  (9)获取元素内容

    ①获取元素

document.getElementById("id名称");

    ②获取元素里面的值

document.getElementById("id名称").value;

  (10)JavaScript事件

    表单提交事件:onsubmit 。

  (11)JavaScript的输出

    ①警告栏:alert();

    ②向页面指定页面位置写入内容:innerHtml(属性) ;

    ③向页面写入内容:document.write(" ");

 3、步骤分析

  (1)第一步,确定事件(onsubmit)并为其绑定一个函数;

  (2)书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个id>);

  (3)对用户输入的数据进行判断;

  (4)数据合法(让表单提交);

  (5)数据非法(给出错误提示信息,不然表单提交)。

  (6)如何控制表单提交?

    关于时间onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个返回值。onsubmit=return checkForm()。

原文地址:https://www.cnblogs.com/gzdlh/p/8137190.html