学哥量化交易学习
持续学习,提高认知,磨炼技艺,从零基础学编程并跨过量化程序交易的大门。
 返回首页
 
 
0045 JavaScript实现注册页面的项目输入检查
作者:学哥
发布时间:2017-5-25
上节课的内容例子比较少,主要是讲解一些基础语法概念。
这节课开始将用更多的实例来进行说明JavaScript的常用方法。

设计一个注册页面
来做一个注册页面,可以输入注册手机号,密码,重复密码,用户名称,性别,兴趣爱好,签名。 然后每个输入项目的右侧可以显示输入检查的结果。 大概是这个样子的: 通过这个注册页面,可以学习到常用的JavaScript方法来检查输入。 首先来创建3个文件,一个是regist.html,一个是regist.css,一个是regist.js。 首先将网页基本内容输入,然后创建一个table,table总共3列,先做第一行注册手机号。 使用CSS样式将文字和输入框做的好看一些,然后js文件里面暂时没有任何内容。 regist.css内容如下: regist.html内容如下: 浏览器打开网页,查看效果:
检查输入结果提示到网页元素内容上
当用户输入好了手机号,点击注册按钮的时候,检查输入的值必须都是数字,并且长度为11位,如果不符合要求,则将提示信息显示在输入框的右侧的td里面的 div内容当中。 因此首先在html的table的td里面增加一个div,设置其CSS样式名为checkmsg,注意先随意放一些内容,用于测试CSS样式,待样式满意了,再将内容删除。同时增加一个注册按钮和对应的样式。 regist.html内容如下: 然后,编写css文件,调整测试内容的显示样式,直到符合要求。 regist.css内容如下: 刷新网页: 可以看到显示了红色的文字,字体大小略小。 然后在js文件中增加检查函数和相应的检查代码,检查长度必须等于11,然后用for循环检查每个字符都必须是数字字符。 regist.js内容如下: 这里有几点说明: document.getElementsByName函数是用来根据表单元素的name属性来获取元素数组,这里注意返回的是元素数组。 要通过下标来获得对应的元素。这里因为只有一个元素的name是phone,所以取第一个就可以了。 substr函数是用于截取字符串的一部分,第一个参数是要从第几个位置开始,第二个参数是要截取的长度。 其它的内容都是之前学习过的。 然后修改html文件,在注册按钮上增加onclick事件,调用registCheck事件,然后删除掉错误提示信息div里面的测试内容,并且给div设置好id属性。 regist.html内容如下: 刷新网页,输入一个长度只有8位,点击按钮后提示错误信息: 刷新网页,输入一个含有字符的内容,点击按钮后提示错误信息:
if判断语句
刚刚的代码里面使用到了if判断语句。 if判断语句的格式如下: if (条件判断语句结果为true) { 满足条件执行的代码 } else { 不满足条件执行的代码 } 其中的条件判断语句结果应该是一个布尔类型数据。 可以通过逻辑运算符来进行组合条件判断。 例如: if (a>b) { console.log(a); } else { console.log(b); } 这个if判断的作用是输入2个变量较大的那一个的值。 例如: if (week==6 || week==7) { console.log("周末"); } else { console.log("工作日"); } 这个if判断的作用是根据是周几来输出是周末还是工作日。 例如,前面输入手机号,根据字符串长度判断是否符合长度为11的要求,不符合要求,则将错误信息显示在网页上。
网页中常见的事件onclick
onclick事件,大家之前也见过2次了,应该不太陌生了。 onclick事件是属于表单元素的属性,用于提交表单时触发事件。 onclick事件是当鼠标点击元素的时候会触发,一般是结合JavaScript函数来进行表单元素处理。 前面在按钮上设置了onclick事件,还可以在输入框元素上也设置onclick事件,当用户点击输入框的时候,可以将右侧的错误信息清除。 regist.js修改内容如下: regist.html修改内容如下: 刷新网页,先输入一个错误的号码,点击注册按钮让提示信息出现: 然后,鼠标光标移动到手机号输入框里面单击,可以看到右侧的提示信息消失了:
HTML表单标签input
这个网页,用到了2次HTML表单标签input。那么来详细讲解什么什么是表单标签,因为这个在后面会用到非常多,是衔接静态网页和动态网页的最重要的枢纽。 HTML表单用于收集用户输入数据。 一般使用form标签来包含各种输入标签元素,并用于提交给后台程序。 form标签内部可以使用不同类型的表单元素来输入不同类型的数据。 例如输入元素、复选元素、单选元素、下拉框选择元素、提交按钮等等。 input是最重要的表单元素。给input设置不同的type属性,网页上可以呈现不同的输入形式。 <input type="text">可以在网页上显示一个文本输入框。 <input type="radio">可以在网页上显示一个单选按钮。 <input type="checkbox">可以在网页上显示一个多选按钮。 <input type="password">可以在网页上显示一个密码输入框,输入的内容都显示为*号。 <input type="submit">可以在网页上显示一个按钮。 <input type="button">同样可以在网页上显示一个按钮。 使用select元素可以显示一个下拉框。 <select> <option>选项1</option> <option>选项2</option> </select> 以上代码可以在网页中显示一个下拉框选项,里面有2个选择项目。 使用textarea可以在网页上显示一个多行文本输入框。 <textarea rows="5" cols="30"> </textarea> 可以在网页上显示一个高5个文字宽30个文字的一个多行的文本输入框。 可以给表单元素设置name属性,用于在JavaScript获取该元素,或者用于提交给后台程序时进行区分。 例如,前面的手机号输入元素的name="phone",然后在JavaScript里面就可以通过document.getElementsByName函数来获取这个元素的内容。 修改testjs.html,将上面的提到的表单元素都显示出来。 testjs.html修改如下: 浏览器打开这个网页: 可以看到不同的元素在网页上呈现的样子。后面还会详细说明每个元素的具体用法。
增加多个输入项目
根据前面的知识,来给注册页面增加剩余的输入项目。 密码和重复密码使用<input type="password">来输入。 用户名称也是使用<input type="text">来输入。 性别可以使用<select>下拉框来输入。 兴趣爱好可以使用多个<input type="checkbox">可以多选输入。 签名可以使用<textarea>来多行输入。 注意每个元素都加上name属性,后面做JavaScript检查需要用到。 修改regist.html代码如下: 修改regist.css代码如下,将网页元素美化一下: 刷新网页,可以看到表单元素。
表单元素的value属性
可以通过给表单元素设置value属性来设置元素中的输入内容。 这样在需要显示默认输入内容的时候有用。 给前面2个元素都加上value属性。 修改regist.html代码: 刷新网页就看到了元素的初始值了。 然后也可以将鼠标光标点击输入元素,修改这些初始的输入值。 试验过后,将value属性删除,后面检查功能不需要给初始值。
完成注册页面检查输入功能
来增加几个检查项目: 密码输入长度要大于等于8位长度 重复密码输入长度要大于等于8位长度 密码和重复密码的值要相等 用户名称的长度要小于等于10位长度 签名的长度要小于等于100位长度 修改js代码如下: 故意输入错误的值,测试看看: 可以看到每个检查项目都正确了。
onfocus和onblur事件
是否可以在用户每输入一个项目,就能立刻检查呢,这样好处是可以更快提醒用户。 可以通过设置在每个项目设置onfocus事件和onblur事件来完成。 onfocus事件是当输入光标焦点进入输入元素内部时产生。 onblur事件是当输入光标焦点离开输入元素内部时产生。 来验证一下: 修改js文件增加2个函数: 删除掉手机号输入框元素的onclick事件,并添加onfocus和onblur事件。 regist.html修改如下: 刷新网页,鼠标单击手机号输入框: 可以看到右侧提示信息显示了内容,说明触发了onfocus事件。 然后鼠标单击密码输入框: 可以看到右侧提示信息显示了内容,说明触发了onblur事件。 给每个输入元素都增加onfocus函数和onblur函数。 当焦点离开的时候检查内容是否正确,当焦点进入的时候清除提示信息。 regist.js修改如下: regist.html修改如下: 刷新网页,进行测试: 可以看到焦点离开时提示了信息。 焦点回到输入框时,一个控件清除提示信息,另一个提示信息。
整理代码重复使用函数
可以看到JavaScript里面有一些代码时重复的。 点击注册按钮时的检查每个元素输入的代码,和单个元素失去焦点时检查输入的代码时相同的。 这时候,可以整理代码,让注册按钮检查代码调用焦点失去函数,这样可以减少重复代码。 regist.js修改如下: 刷新网页,重新测试,可以看到效果不变。
学哥量化交易学习团队
   致力于:持续学习,提高认知,磨炼技艺,持续输出高质量的教程和课程,帮助更多的人从零基础学编程并跨过量化程序交易的大门。
零基础学编程Python入门课程
课程包含以下内容:
1.图文教程《零基础学编程入门-从Python到Web网站.pdf》,学哥原创版权,共计1024页高清图文教程。
2.视频课程《零基础学编程Python入门》,学哥原创版权,共计24节课45个高清视频。
3.视频教程《玩转魔方》,学哥原创版权,可以送给孩子,共计16个高清视频。
4.图文教程《如何寻找编程相关的电子书下载资源.pdf》。
5.加入学哥编程学习辅导QQ群在线交流。

客服 10:00-17:00
QQ: 44556287
微信公众号
学哥量化交易学习
 
  微信公众号:学哥量化交易学习     QQ群1:603559164    客服QQ号:44556287
工信部备案/许可证编号:沪ICP备15050545号-4