JavaScript基础插曲-练习
Javascript基础学习
eg:利用正则表达式来去掉空格。
1:msg=' Hello ';
- <script type="text/javascript">
- var msg = ' Hello ';
- msg = msg.replace(/^\s+/, "").replace(/&\s+/, '');
- alert(msg);
- </script>
eg:利用js实现登录的时候显示密码的强度
这个主要使用正则表达式来进行判断和js操作样式来改变下面的颜色。需要注意的是switch的时候千万不要忘记写break;在合适的地方跳出来。
- <script type="text/javascript">
- window.onload = function () {
- //这里为文本框注册一个键盘键按下后弹起的事件
- document.getElementById('txtPassword').onkeyup = function () {
- var tds = document.getElementById('tb1').getElementsByTagName('td');
- //初始化颜色
- for (var i = 0; i <tds.length; i++) {
- tds[i].style.backgroundColor = '';
- }
- //1:获取用户输入的内容
- var val = this.value;
- if (val.length > 0) {
- //2:根据用户输入的密码,来效验密码的强度。
- var pwdLvl = getPasswordLever(val);
- //3:改变下面显示的强度。
- switch (pwdLvl) {
- case 0:
- case 1:
- case 2:
- //弱
- tds[0].style.backgroundColor = 'red';
- break;
- case 3:
- case 4:
- //中
- tds[0].style.backgroundColor = 'orange';
- tds[1].style.backgroundColor = 'orange';
- break;
- case 5:
- //强
- tds[0].style.backgroundColor = 'green';
- tds[1].style.backgroundColor = 'green';
- tds[2].style.backgroundColor = 'green';
- break;
- default:
- }
- }
- };
- };
- //这里是申明了一个匿名函数,通过这个匿名函数来判断密码的强度。
- function getPasswordLever(user_pwd) {
- //下面是通过正则表达式的match()方法来判断输入的密码中是否有满足的指定条件。
- var lvl = 0;
- //1:含有数字,强度+1
- if (user_pwd.match(/\d+/)) {
- lvl++;
- }
- //2:含有小写字母,强度+1
- if (user_pwd.match(/[a-z]+/)) {
- lvl++;
- }
- //3:含有大写字母,强度+1
- if (user_pwd.match(/[A-Z]+/)) {
- lvl++;
- }
- //4:含有特殊符号,强度+1
- if (user_pwd.match(/[^0-9a-zA-Z]+/)) {
- lvl++;
- }
- //5:密码的长度超过6位,强度+1
- if (user_pwd.length > 6) {
- lvl++;
- }
- return lvl;
- }
- </script>
关于笔记:自己要很认真的写,一些知识点自己学过去就会忘记,笔记可以为以后留着复习用。希望自己坚持下去。
JavaScript基础插曲-练习的更多相关文章
- JavaScript基础插曲—元素样式,正则表达式,全局模式,提取数组
JavaScript基础学习 学习js的基础很重要,可以让自己有更多的技能.我相信这个以后就会用到. Eg:点击选择框,在div中显示出选择的数量 window.onload = function() ...
- JavaScript基础—插曲
Javascript基础 1:js中我们最好使用单引号,其实可以使用双引号的但是为了区别所以js中全部使用单引号.注释和C#的是一样的.网页里面的执行顺序是从上到下依次执行的,不管你js放到哪里,都会 ...
- JavaScript基础插曲---apply,call和URL编码等方法
Js基础学习 Js的压缩: 就是利用js的语法格式通过缩短变量名,去掉空格等来进行压缩. Apply和call的使用 1:apply方法:应用某一对象的方法,用于一个对象替换当前对象.主要是改变thi ...
- JavaScript基础插曲—获取标签,插入元素,操作样式
Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...
- JavaScript基础—插曲02
Js学习基础 1:关于js中的数组 这里面可以是键值对的形式来存储的,我们必须利用forIn来输出,这就相当于foreach一样. var dir = new Array(); dir['0'] = ...
- JavaScript基础
JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
随机推荐
- MQTT和WebSocket
严格来说,MQTT跟WebSocket关系不大.他们不是在一个层级的. MQTT和TCP.WebSocket的关系可以用下图一目了然: 参考资料: http://www.zhihu.com/q ...
- ENode 2.0 - 第一个真实案例剖析-一个简易论坛(Forum)
前言 经过不断的坚持和努力,ENode 2.0的第一个真实案例终于出来了.这个案例是一个简易的论坛,开发这个论坛的初衷是为了验证用ENode框架来开发一个真实项目的可行性.目前这个论坛在UI上是使用了 ...
- WPF,Silverlight与XAML读书笔记第四十六 - 外观效果之三皮肤与主题
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 皮肤 皮肤是应用程序中样式与模板的集合,可以 ...
- js限制input标签中只能输入中文
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(七):解决用户上下文(Session)问题
从这篇文章中我们已经了解了微信公众平台消息传递的方式,这种方式有一个先天的缺陷:不同用户的请求都来自同一个微信服务器,这使得常规的Session无法使用(始终面对同一个请求对象,况且还有对方服务器Co ...
- 打包上传成功, itunes connect 不出现上传的版本
由于有一次感觉build setting 里 code signing identity设置证书有点乱,有些已经用不到了,就想把那些删除 于是我找到了所有证书的那个文件夹(进入所有证书的那个文件夹), ...
- redis配置文件redis.conf中文版(基于2.4)
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/99.html?1455869981 代码如下: # Redis示例配置文件 ...
- 大叔也说Xamarin~Android篇~ListView里的Click事件并获取本行的其它元素
回到目录 我原创,我贡献,我是仓储大叔 本篇大叔原创,本着对技术的热爱去研究它,把成果分享给国人!大叔始终相信一句话:你只有选择一个感兴趣的工作,你才能更好的发挥你的潜力,而这一切都建立在你不断研究, ...
- 让自己成为合格的IT员
2016年10月27日,正式加入了IT天启网络公司,从今天开始就意味着我要正式进军IT行业了. 虽然是为期四个半月的培训,我相信我能够我一定可以在这四个半月的时间里成为一个合格的.优 ...
- vuejs切换视图同时保持状态
vuejs切换视图同时保持状态 http://cn.vuejs.org/guide/components.html#动态组件 动态组件 多个组件可以使用同一个挂载点,然后动态地在它们之间切换.使用保留 ...