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()。