<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>HTML标签</title>
</head>
<body>
<!-- 输入框 -->
<input id="mytxt" type="text" /><br />
<!-- 密码框 -->
<input id="mypwd" type="password" placeholder="hello..." /><br />
<input id="mybtn" type="button" value="click" /><br />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
html介绍.
简单介绍一些基础控件怎么跟js交互.
*/
/*
输入框使用范围是很广泛的.经常用来接收客户端的输入数据.
比如用户名/搜索关键字什么的.
*/
//点击按钮输出数据
var btn = document.getElementById("mybtn");
btn.onclick = function(){
var txt = document.getElementById("mytxt");
//输出文本框输入值
console.log(txt.value);
}
/*
现在到处都讲用户体验,用输入框的时候,
经常会有需求让输入框默认显示一段提示文字.
只需要在文本框加上属性placeholder="用户名"就可以了.
*/
var txt = document.getElementById("mytxt");
txt.placeholder = "输点啥吧...";
/*
这样用js加载也能达到目的,不过从渲染的角度来说.
这个属性还是直接写在html标签中会好一些.如密码框那个.
看上去,已经有点高大上了对吧.
但是不幸的是IE8以下是不支持这个属性的.
现实一般都比较残酷.
解决方法有两种:
1.简单点采用文本框的onblur/onfocus,聚焦value="",失焦value="输点啥吧...",
不好的地方是跟用户自己输入的数据冲突了.
2.采用div布局,显示一段文字在文本框下面.这个说起简答,操作起来还是有一定难度的,
但是效果还是很不错的.
*/
/*
说到输入框,可能又需要掌握另外一个东西.
那就是数据检查,常用的就是使用正则表达式了.
*/
/*
js的正则表达式对象有三个方法test(),exec(),compile()
申明reg对象方法也有两种
reg = /d/;
reg = new RegExg("d");
*/
/*
用户注册的时候,总有些需求让你提示用户密码过于简单.
希望密码超过6位数,还要数字+字母.
*/
/*
思路:
1.通过字符串length属性判断长度是否大于6.
2.通过正则表达式的test()方法,验证字符串必须包含数字和字母.
test()方法检索字符串中指定的值.返回值true/false.
*/
//验证正则表达式,数字和字母,拆分一下就是匹配 字母+数字 | 数字 + 字母
var reg = /[A-Za-z]+[0-9]+|[0-9]+[A-Za-z]+/;
var btn = document.getElementById("mybtn");
btn.onclick = function(){
var pwd = document.getElementById("mypwd");
var str = pwd.value;
if(str.length > 6){
//通过test()方法验证
if(!reg.test(str)){
console.log("密码必须过于简单");
}
else{
console.log("密码合法");
}
}
else{
console.log("密码必须输入6位以上");
}
}
/*
如果正则不是特别熟悉,可能还是有一点迷糊.其实我们还可以拆分一下问题.
可以分成三步来做:
1.长度必须大于6
2.验证字符串中是否包含数字
3.验证字符串中是否包含字母
*/
//验证是否包含数字
var regNum = /\d+/;
//验证是否包含字母
var regLetter = /[a-zA-Z]+/;
var btn = document.getElementById("mybtn");
btn.onclick = function(){
var pwd = document.getElementById("mypwd");
var str = pwd.value;
if(str.length > 6){
//验证是否包含数字
if(regNum.test(str)){
//验证是否包含字母
if(regLetter.test(str)){
console.log("密码合法");
}
else{
console.log("密码必须包含字母");
}
}
else{
console.log("密码必须包含数字");
}
}
else{
console.log("密码必须输入6位以上");
}
}
/*
这样正则表达式写起来就比较简单了,从中貌似可以得出一个结论.
复杂的需求可以,写多个功能单一的正则表达式进行验证.
并不一定非得用一个正则来实现,以免让自己陷入麻烦之中.
*/
/*
正则表达式还有一个常用的场景,就是用来抓取数据.
exec方法检索字符串中指定的值,如果匹配则返回匹配到的值,否则返回null.
*/
/*
获取一段字符中所有的数字.
*/
var str = "beijing2014";
var reg = /\d/g;
do{
var resule = reg.exec(str);
if(resule !== null){
console.log(resule[0]);//2014
}
}
while(resule !== null);
/*
这样就得到了字符串中所有的数字,但是这样貌似感觉没啥大用,那我们稍稍改一下需求.
比如现在需要获取字符串中的手机号码.
*/
/*
分析一下手机号码的特征:
1.手机号码都是数字,有11位,并且都是以13/15/18开头.
*/
var reg = /(13|15|18)\d{9}/g;
var str = "sdfl13810881088sdfkk_sdfwerjkj328479120_sdfktel:18610881088,drt.gt158108810888880";
do{
var resule = reg.exec(str);
if(resule !== null){
console.log(resule[0]);//13810881088/18610881088/15810881088
}
}
while(resule !== null);
/*
这样我们就抓取了字符串中的电话号码,当然这个也是很简单的场景.
实际的情况可能要比这复杂的多,但是没关系,我们只需要仔细的分析我们要抓取的数据是什么特征的.
然后根据这些特征编码匹配的正则表达式.
需要提一下,抓取数据的正则表达式后面多了一个g.
这个g是指进行全文搜索,找到第一个匹配值,并存储其位置.
再次运行exec(),则从储存的位置开始检索,找到下一个匹配值,并储存位置.
*/
/*
思考一下:
如果var reg = /(13|15|18)\d{9}/,没有写g,我们能获取到几个电话呀?
*/
/*
知识点:
1.介绍了文本框的使用.
2.介绍了文本框placeholder属性.
3.介绍了正则表达式的test()和exec()两个方法的使用.
*/
</script>
分享到：
相关推荐
【HTML 介绍1】 HTML（HyperText Markup Language）是网页制作的基础，它是互联网上应用最广泛的语言，用于创建和设计网页。HTML 不仅仅是一种编程语言，而是一种标记语言，它通过一系列特定的标签来描述文档内容和...
HTML介绍css的代码可以插入html,插入语法为<style type="text/css">css-code</style>HTML标签段落标签 <p>
这个"团队介绍html.zip"文件提供了一个HTML团队模板，适用于展示多人团队项目和个人介绍，帮助用户快速创建专业且吸引人的在线团队展示页面。PUDN（Programmers University Developer Network）是一个程序员和开发者...
旅游景区介绍html5模板是一款旅行社旅游景点介绍旅游线路规划网站模板下载。
1. HTML元素：HTML由一系列标签组成，例如`<div>`, `<header>`, `<nav>`, `<section>`, `<article>`, `<img>` 和 `<a>`等，它们定义了网页的内容和结构。 2. CSS选择器：CSS通过选择器来定位HTML元素，如类选择器（`...
《程序猿炫酷个人介绍HTML源码》是一个专为程序员设计的、用于展示个人技能和经验的网页模板。这个源码充分利用了HTML5的新特性，结合CSS3的动画效果，打造出一个充满科技感且交互性强的个人简历页面。在Web开发领域...
HTML，全称HyperText Markup Language，即超文本标记语言，是网页制作的基础。它是一种用于创建和展示网页的标准标记语言，让信息以结构化的方式呈现，并可以与样式表（CSS）和脚本语言（如JavaScript）结合使用，...
1. HTML文件：这是模板的主要内容，包含HTML标记和结构，定义了网页的布局和内容。文件名可能是index.html或其他相关的页面名称，如about.html（关于我们）、services.html（服务）等。 2. CSS文件：这些样式表文件...
这个名为"html+js+css自我介绍"的项目，显然利用这三种语言创建了一个动态的个人简历展示页面，其中包含了滑动滚轮效果来切换不同的界面内容。让我们详细探讨一下这三个关键元素以及它们如何协同工作来实现这样的...
漂亮大气VIP会员介绍页面 html单页源码无需数据库 扒的某站漂亮大气VIP会员介绍页面 html单页源码无需数据库 刚流出的众人帮任务悬赏平台新UI版本，去除了短信注册接收验证码（当然也可以加），充值对接了Z支付个人...
本课程设计项目是一个基于HTML构建的游戏介绍网站，旨在教授学生如何使用HTML、CSS等前端技术来创建一个功能齐全、信息丰富的网页平台。这个网站能够展示各种游戏的信息，包括游戏简介、截图、攻略等内容，为用户...
适合向非IT人员讲解HTML5，也可向IT交流代码。主要内容是详细介绍HTML5更新内容，代码应用
1）个人网站首页（） 2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单...
### 1. HTML5与CSS3在个人网页设计中的应用 - **HTML5**: 作为第五代的HTML标准，提供了更丰富的标签来支持多媒体内容，例如 `<video>` 和 `<audio>` 标签可以直接嵌入视频和音频，无需额外插件支持。此外，还引入...
大学生静态网页设计期末作业川剧介绍的静态网页HTML源码带简单交互效果（必过） 一个关于川剧介绍的静态HTML网页，有着一些简单的交互效果,95分以上没问题啊，大作业必过，课程设计必过！ 大学生静态网页设计期末...
<li><a href="jieshao.html">介绍</a></li> <li><a href="jingdian.html">景点</a></li> <li><a href="meishi.html">美食</a></li> <div class="banner"><img src="images/banner_1.jpg"/> <!-- 内容 --> ...
【旅游景区介绍网站html整站】是一个完整的网页设计项目，它专为展示旅游景区信息而构建，包含丰富的内容，可以直接应用于实际的在线平台。这个资源对于那些需要快速搭建旅游类网站的开发者来说非常实用，无需从零...
【标题】：“基于HTML5的Web前端设计（旅游景点介绍）” HTML5是现代Web开发的核心，它在传统的HTML4基础上引入了许多新特性，增强了网页的交互性和动态性。在这个项目中，我们主要关注如何利用HTML5进行网页设计，...
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互...