目录
HTML
JS部分
Js事件编程的三要素:
1)事件源----html标签 点击按钮/图片点击等等
2)编写事件监听器---写一个函数
a,b参数名称
function 函数名称(形式参数不需要带var){
完成的逻辑
}
3)在1)中通过一些属性绑定这个函数
onclick="函数名()"
dom编程:文档对象模型编程
dom编程:(Document Object Model)浏览器js引擎在html页面的时候,将页面中的每一个标签解析"标签对象"(Element),形成一种树状结构---->document—代表整个html文档。
浏览器的js引擎解析浏览器html页面的时候,将html页面中所有的标签都解析为 “标签对象”,通过标签对象完成一些具体的操作;
- 1)获取标签对象
通过id属性值获取标签对象(最常用的,id必须唯一的) - 2)改变标签对象的属性
通过特有方式获取节点对象(元素对象)改变一些属性!
通用的document对象的方法获取标签对象
document.getElementById(“id属性值”) ;
document.getelementsByClass(“同名的class属性值”) ;
document.getElementsByTagName(“同名的标签名称”) ;
document,getElementsByName(“所有的同名的name”) ;
switch语句练习
需求:
在文本输入框中输入月份的值,点击查询按钮—弹框显示"对应的季节"
3,4,5 春季
6,7,8 夏季
9,10,11 秋季
12,1,2 冬季
<head>
<script>
//点击查询按钮的函数
//事件监听器
function searchMonth(){
//alert("点击按钮了") ;
//1)获取文本输入框的内容
//1.1)通过id属性值="month"获取 第一个input标签对象
var inputObject = document.getElementById("month") ;
//1.2)通过标签对象获取value属性
var content = inputObject.value ;
alert(typeof(content)) ;
//alert(content) ;
//if语句 :string类型自定转换number 然后后面进行比较
/* if(content==3 || content==4 || content ==5){
alert("春季") ;
}else if(content == 6 || content ==7 || content==8){
alert("夏季") ;
}else if(content == 9 || content ==10 || content==11){
alert("秋季") ;
}else if(content == 12 || content ==1 || content==2){
alert("冬季") ;
}else{
alert("非法数据") ;
} */
//必须类型转换
content = parseInt(content) ;
alert(typeof(content)) ;
switch(content){ //content--String字符串对象
case 3:
case 4:
case 5:
alert("春季") ;
break ;
case 6:
case 7:
case 8:
alert("夏季") ;
break ;
case 9:
case 10:
case 11:
alert("秋季") ;
break ;
case 12:
case 1:
case 2:
alert("冬季") ;
break ;
default :
alert("非法数据") ;
break ;
}
}
</script>
</head>
<body>
<input type="text" id="month" placeholder="请输入月份的值" /><input type="button" onclick="searchMonth()" value="点击查询" />
</body>
for-in语句练习
<script>
//创建一个数组 Array---Javascrpt的内置对象
//方式1: var 数组名称 = new Array() ; //没有给定长度
//方式2:var 数组名称 = new Array(size) ;//给定数组长度
//前面两种格式:类似Java创建数组的动态初始化,给定数组长度
//Array内置对象数组特点: 1)可以存储任意类型元素
//2)可以不断的给数组中添加数据,不存在角标越界
//方式3: var 数组名称 = new Array()[元素1,元素2,.....] ;
//静态初始化---简写为 var 数组名称 = [元素1,元素2,.....] ;
/* var arr = new Array() ; //没有给定长度
alert(arr.length) ;
arr[0] = "hello" ;
arr[1] = 10 ;
arr[2] = true ;
arr[3] = 'A' ;
alert(arr.length) ; */
/* var arr = new Array(3) ;
alert(arr.length) ;
arr[0] = "hello" ;
arr[1] = "world" ;
arr[2] = "JavaEE" ;
arr[3] = "Servlet" ;
alert(arr.length) ;
*/
//方式3:创建数组 静态初始化 简写格式 [元素1,元素2,...]
var arr = [10,5,20,35,69] ;
alert(arr.length) ;
//遍历: 普通for
for(var i = 0 ; i < arr.length;i++){
document.write(arr[i]+"<br/>") ;
}
document.write("<hr/>") ;
/**
* for(var 变量名 in 数组对象或者对象名称){
使用这个变量名
}
*/
for(var x in arr){
document.write(arr[x]+"  ") ;
}
document.write("<hr/>") ;
//Array内置对象提供很多功能
//join(str):通过指定的分割符号将数组的元素拼接成字符串
//reverse():将数组的元素反转....
var arrArray = ["Java","Python","C++","Php","Go"] ;
//var str = arrArray.join("-") ;
//document.write(str) ;
for(var i = 0 ; i < arrArray.length ; i ++){
document.write(arrArray[i]+"  ") ;
}
document.write("<hr/>") ;
arrArray = arrArray.reverse() ;
for(var i in arrArray){
document.write(arrArray[i]+"  ");
}
</script>
Js中的函数定义以及调用
函数定义:
function 函数名称(参数名称列表或空参){
完成的方法体的逻辑
情况1)----直接输出
情况2)---return 直接返回数据 ;
}
- 情况1的调用:
单独调用 :函数名称(实际参数列表) ; - 情况2的调用:
赋值调用
var 结果变量 = 函数名称(实际参数列表) ;
注意事项:
- 1)定义函数的时候,函数中参数列表不能带var，和Java不一样(Javascript弱类型语言)
public static int add(int a,int b){} - 2)Javascript定义函数function 函数名称(参数列表){},不需要返回类型
但是方法体中是可以使用return语句的 - 3)javascript 不存在函数重载的概念,函数名称相同,后面的函数将前面的函数覆盖!
- 4)js的函数中存在默认数组arguments,将实际参数赋值给形式参数!
定义一个函数:两个数据求和
//function add(var a,var b){
/* function add( a, b){
var result = a +b ;
console.log(a+b) ;
document.write(a+b) ; //给浏览器写数据
} */
//调用
//add(10,20) ;
<script>
function add(a,b,c){
//js的函数里面隐藏了数组名称 :arguments ,将实际参数赋值给形式参数
for(var i = 0 ; i < arguments.length;i++){
document.write(arguments[i]+"  <br/>") ;
}
return a+b+c ;
}
/* function add(a,b){
var c = a+b;
return c ;
} */
//调用时候
//var result = add(10,15) ; //实际参数列表 个数< 形式参数个数 --->结果NAN 没有值
var result = add(10,15,20) ; //实际参数列表格式 > 形式参数个数 --->将前面的值进行操作,后面多余的操作不参与
document.write(result) ;
console.log(result) ;
</script>
String内置对象涉及的功能
<script>
//创建一个字符串对象
//var 字符串名称 = new String(val) ;
var s1 = new String("hello") ;
var s2 = new String("hello") ;
document.write((s1==s2)+"<br/>") ;
//js相比较两个对象的内容是否相同,String对象---valueOf():比较两个字符串对象的原始值是否相同
document.write(((s1.valueOf())==(s2.valueOf()))+"<br/>") ;
document.write("<hr/>") ;
//一般创建字符串:跟Java语言一样,直接常量赋值
var str = "helloJavaEE" ;
//String内置对象的常用功能
//charAt(index)返回指定索引位置处的字符
document.write(str.charAt(4)+"<br/>") ;
//concat(str):拼接功能
document.write(str.concat("world")+"<br/>") ;
//fontcolor("颜色名称"):给字符串标记颜色
document.write(str.fontcolor("darkorange")+"<br/>") ;
//fontsize(整数), 给字体设置大小
//<font size="25"></font>
document.write(str.fontsize(25)+"<br/>") ;
//substring(start, end):截取功能
document.write(str.substring(0,5)+"<br/>") ;
//创建一个字符串
/* var str2 = "Java-Python-PhP-Go" i;
//split(字符串):通过分隔符的字符串将字符串拆分成字符串数组
var strArray = str2.split("-") ;
for(var i in strArray){
document.write(strArray[i]+"  ") ;
} */
</script>
Date日期内置对象
<script>
//创建日期对象
var date = new Date() ;
//document.write(date) ;
//Date提供一些功能:
//获取年份 getYear()获取的当前年份和1900之间的差值
//document.write(date.getYear()+"年") ;
//getFullYear();
document.write(date.getFullYear()+"年") ;
//获取年中的月份
//getMonth():返回0-11之间的整数
document.write((date.getMonth()+1) +"月") ;
//月份中的日期值
//getDate()
document.write(date.getDate()+"日 ") ;
//getHours()小时 getMinutes()分钟 getSeconds()秒数
document.write(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds())
</script>
网页定时器以及使用
定时器有两种
-
window.setInterval(定时任务就是一个函数, iMilliSeconds )
每经过iMilliSeconds毫秒后重复执行这个任务函数 -
window.setTimeout(定时任务就是一个函数, iMilliSeconds)
经过iMilliSeconds毫秒后执行一次任务函数!任何标签都有两个属性 给标签设置文本 innerText:普通文本 innerHTML:html文本 <h3>文本内容</h3>
网页定时器setTimeout()和setInterval()的区别
window对象:浏览器窗口的顶级对象,调用它里面的方法 window可以不写
timerId1= setTimeout(“任务函数()”,时间毫秒值) //经过这个时间毫秒值后执行一次任务
timerId2= setInterval(“任务函数()”,时间毫秒值) //每经过这个时间毫秒值后重复执行这个任务!
关闭定时器
window对象的的方法
clearTimeout(timerId1) ;
clearInterval(timerId2) ;
动态给标签设置文本
- 1)需要获取当前标签对象 通过id属性值获取标签对象
var 标签对象名称= document.getElementById(“id属性值”) ; - 2)使用标签对象名称 访问属性
innerText
innerHTML
定时器1的应用
<body>
当前系统时间是:<span id="spanTip"></span>
</body>
<script>
function genDate(){
//完成网页时钟:
//1)需要创建js的日期对象
var date = new Date() ;
//2)拼接日期+时间的字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
+date.getDate()+"  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
//3)将日期+时间的字符串 动态设置到span标签体中
//3.1)获取id="spanTip"标签对象
var spanObj = document.getElementById("spanTip") ;
//3.2)设置它的文本内容
spanObj.innerHTML = "<h3>"+dateStr+"</h3>" ;
}
//4)需要有定时器---每秒(1000毫秒)都执行
//window.setInterval(定时任务就是一个函数, iMilliSeconds )
setInterval("genDate()",1000) ; //每1秒中都需要执行这个函数
</script>
定时器2的应用
<script>
var taskId ;
//1)点击按钮----触发单击点击事件
function myClick(){
//3秒后执行一次任务
//window.setTimeout("OpenHref()",3000) ;
taskId = window.setInterval("OpenHref()",3000) ;
//alert("触发点击了")
}
function clearMyClick(){
window.clearInterval(taskId) ;
}
function OpenHref(){
//open方法:参数1:打开地址 参数2:打开地址的方式
window.open("06_Date日期对象.html","_blank") ;
}
//2)弹框----window.open("url地址") ;
//定时器
//window.setTimeout() ;
</script>
<body>
<input type="button" onclick="myClick()" value="点击"/>
<input type="button" onclick="clearMyClick()" value="清除定时器"/>
</body>
Js常见事件的分类
- 点击事件
onclick–绑定单击事件
ondblclick–绑定双击事件 - onfocus–获取焦点(文本输入框,点击进去输入内容)
onblur–失去焦点 - 下拉菜单选项卡发生变化的事件onchange事件
- 鼠标移出/鼠标经过:onmouseout/onmouseover事件
- 页面载入事件onload
<script>
//通过id="bodyNode"获取body标签对象
var bodyNode = document.getElementById("bodyNode") ;
bodyNode.onload = function(){ //匿名函数
alert("触发了页面载入事件,body内容加载完毕了");
}
/*
function myInit(){ //有名字的函数 myInit
alert("页面载入事件触发,body内容已经全部加载完毕!") ;
} */
function testMouserOut(){
alert("触发鼠标移出事件") ;
}
function testMouseOver(){
//alert("触发鼠标经过事件;") ;
//Js的bom:基于浏览器对象模型编程
//window对象下面有个子对象 location地址栏--href
//location.href [ = sURL ]
location.href="adv广告页面.html" ;
}
//测试下列选项卡的变化触发onchange事件
function testChange(){
//alert("选项发送变化!") ;
//在这个函数中获取选项中value值
//通过id="province"获取select标签对象,同时获取到里面的value属性
var province = document.getElementById("province").value ;
//alert(province) ;
//通过id="city"获取它的下拉菜单标签对象
var selectSecond = document.getElementById("city") ;
//当选项卡的内容变化,将上一次城市的内容清除掉
selectSecond.innerHTML ="" ;
//判断province值
if("陕西省"==province){
//选中了陕西省
//定义一个陕西省所在城市的数组
var arr = ["西安市","咸阳市","宝鸡市","渭南市","神木市"] ;
//遍历数组获取到每一个城市
for(var i = 0 ; i < arr.length ; i ++){
//给上面的第二个下拉菜单标签对象追加这个option标签
selectSecond.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
if("山西省"==province){
//选中了陕西省
//定义一个陕西省所在城市的数组
var arr = ["太原市","晋中市","运城市","大同市","临汾市"] ;
//遍历数组获取到每一个城市
for(var i = 0 ; i < arr.length ; i ++){
//给上面的第二个下拉菜单标签对象追加这个option标签
selectSecond.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
if("广东省"==province){
//选中了陕西省
//定义一个陕西省所在城市的数组
var arr = ["东莞市","佛山市","深圳市","珠海市","广州市"] ;
//遍历数组获取到每一个城市
for(var i = 0 ; i < arr.length ; i ++){
//给上面的第二个下拉菜单标签对象追加这个option标签
selectSecond.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
}
//测试失去焦点
function testBlur(){
//获取文本输入框的内容
//通过标签对象获取value属性---默认值
var usrename = document.getElementById("username").value ;
//获取id="tip"的span标签对象
var spanObj = document.getElementById("tip") ;
//模拟数据:如果这个username内容不是高圆圆,提示"格式错误",否则,恭喜"可用"
if(usrename !="高圆圆"){
spanObj.innerHTML = "用户名格式有误".fontcolor("red") ;
}else{
spanObj.innerHTML = "恭喜您,可用".fontcolor("greenyellow") ;
}
}
//测试获取焦点事件
function testFocus(){
//通过id="username"获取它的input标签对象
var username = document.getElementById("username") ;
//清空掉它的value属性
username.value ="" ;
}
//测试单击
function testMyclick(){
alert("点我试试") ;
}
//双击
function testMyDblClick(){
alert("点两下" ) ;
}
</script>
Js自定义对象的方式
方式1:类似Java中有参构造方法
定义一个对象-- 和定义函数的格式相同
function 对象(形式列表){
//追加属性
this.属性名1 = 参数名1;
this.属性2= 参数名2;
//追加功能
this.方法名 = function(){
逻辑...
}
}
创建对象
var 对象名 = new 对象(实际参数列表) ;
//定义一个学生对象,name,age,gender三个属性
function Student(name,age,gender){
//追加属性名
this.name = name ;
this.age = age ;
this.gender = gender ;
//追加功能
this.sperkEng=function(languageName){
alert("会讲"+languageName) ;
}
}
//创建一个学生对象
var student = new Student("孙二娘",44,"女") ;
方式2:类似Java中无参构造方法
定义对象
function 对象(){
}
创建对象
var 对象名 = new 对象() ;
//追加属性
对象名.属性名= 值
//追加功能
对象名.方法名 = function(){
...
}
//定义学生对象
function Student(){
}
//创建对象
var s = new Student() ;
//追加属性
s.name = "张青" ;
s.age = 35 ;
s.gender = "男" ;
//追加方法
s.speak=function(name){
alert("会说"+name) ;
}
方式3: 利用Object 对象,所有js对象的模板!
//直接创建对象
var s = new Object() ;
//追加属性
s.name = "扈三娘" ;
s.age =32 ;
s.gender="女" ;
//追加功能
s.speak=function(lname){
alert("会说"+lname) ;
}
方式4:字面值的方式 利用json字符串
{"key":"value"}
最常用的一种格式
普通字符串
var json对象 = {"key1":"value1","key2":"value2",....} ;
var s = {
"name":"王英",
"age" :23 ,
"gender":"男",
"address":"清风山" ,
"speak":function(lname){
alert("会讲"+lname)
}
};
*var json对象 =[
{"key1":"value1","key2":"value2"...},
{"key1":"value1","key2":"value2"...},
{"key1":"value1","key2":"value2"...}
];
var json对象= {
"key":"[
{},{},{}
]"
}
var students = [
{"name":"顾大嫂","age":44,"gender":"女","address":"登州"},
{"name":"武松","age":35,"gender":"男","address":"清河县"},
{"name":"潘金莲","age":32,"gender":"女","address":"武大郎家"},
];
document.write("年龄是:"+students[0].age);
document.write("-姓名是:"+students[1].name) ;
document.write("-地址是:"+students[2].address) ;
需求:
定一个对象 ArrayTool
追加两个方法 max(array),获取数组中的最大值
search(array,target):
在已知的数组中,查询target指定元素的角标值
//定义一个对象
function ArrayTool(){
//追加方法max
this.max = function(array){
//获取数组的最大值的逻辑
//定义一个参照物
var max = array[0] ;
//遍历数组
for(var x = 1 ; x < array.length; x++){
if(array[x]>max){
max = array[x] ;
}
}
return max ;
}
this.search = function(array,target){
//查询数组中指定的target元素的角标
var index = -1 ;
//遍历数组
for(var x = 0; x< array.length; x++){
//如果这个元素就是target,将index修改了
if(target == array[x]){
index = x ;
}
}
return index ;
}
}
<script src="js/ArrayTool.js"></script>
<script>
//有一个数组
var arr = [25,69,77,67,13] ;
//创建ArrayTool对象
var at = new ArrayTool() ;
var max = at.max(arr) ;
document.write("最大值是:"+max+"<br/>") ;
var index = at.search(arr,670) ;
document.write("index:"+index+"<br/>") ;
</script>
document对象的方法获取标签对象
<body>
用户名:<input type="text"
id="username" onblur="getUsername()" name="name" class="user" placeholder="请输入用户名" />
</body>
<script>
//当前鼠标点击到文本输入框输入内容,失去焦点,
//弹一个提示框"用户名内容"
function getUsername(){
//document对象的方法获取标签对象
//1)getElementById("id属性值"),获取指定标签对象
var inputObj =document.getElementById("username") ;
//通过节点关系获取标签对象---js内置对象属性 parentNode
/* var bodyNode = inputObj.parentNode ;
alert(bodyNode.nodeName) ;//获取节点名称 nodeName
var childs = bodyNode.childNodes ; //所有的子节点
for(var i= 0 ; i <childs.length ; i ++){
document.write(childs[i].nodeName+"<br/>") ;
} */
//2)var 标签对象列表 =doucment.getElementsByClassName("页面中所有的同名的class属性值)
//var inputObj = document.getElementsByClassName("user")[0] ;
//3)通过标签名称获取标签对象--标签对象列表
//document.getElementsByTagName("标签名称") ;
//var inputObj = document.getElementsByTagName("input")[0] ;
//4)通过name属性值获取标签对象--标签对象列表
//document.getElementsByName("所有 同名的name属性值") ;
//var inputObj = document.getElementsByName("name")[0] ;
alert(inputObj.value) ;
}
</script>
Js常用正则表达式语法
X代表任意字符
- 数量词相关的
- X+:表示X字符出现一次或者多次 等价于{1,} 至少出现一次
- X*:表示X字符零次或多次 等价于{0,}。至少出现0次
- X?:表示X字符出现0次或者1次,等价于{0,1}:至少出现0次,不超过1次
- 范围:
- X{n}: 表示X字符恰好出现n次
- X{n,}:表示X字符串至少出现n次 等价于X+
- X{n,m}:表示X字符串至少n次,但是不超过m次
- 其他语法:
- \d— 等价于[0-9]匹配纯数字
- \w-- 等价于[A-Za-z0-9_]:匹配带有下划线的任何单词字符
- 邮箱里面–本身包含字符 .---->必须转义 .
正则表达式如何使用?
-
创建正则表达式对象
var 对象名 = /正则语法/ ; – 不推荐 “不完全匹配”
推荐
var 对象名= /^ 正则语法 $/ ;
边界匹配符号:
^:以…开头
$:以…结尾 -
var flag = 通过正则表达式对象名.test(输入的字符串)
flag–true,成功
false,匹配失败
<script>
//字符串值
var str ="abcd12efg" ;
//创建一个正则表达式对象
var reg = /^[0-9]{2}$/ ; //完全匹配 才能通过
if(reg.test(str)){
alert("条件成立!") ;
}else{
alert("条件不成立!") ;
}
</script>
练习
- js正则表达式 使用
- dom操作—获取标签对象—获取用户信息
- js事件编程
<style>
#formDiv{
border: 1px solid #000;
width:450px;
height: 300px;
margin-left: 350px;
margin-top: 150px;
}
#userDiv{
margin: 20px 0 0 70px;
}
#pwdDiv{
margin: 20px 0 0 70px;
}
#rePwdDiv{
margin: 20px 0 0 70px;
}
#emailDiv{
margin: 20px 0 0 70px;
}
#btnDiv{
margin: 20px 0 0 180px;
}
</style>
</head>
<body>
<div id="formDiv">
<!--
表单是否能够提交取决onsubmit事件 的返回结果:true---提交表单
否则false,不能提交表单(有一些表单项通不了正则)
-->
<form action="server.html" method="get" onsubmit="return checkAll()">
<div id="userDiv">
用户  名:<input type="text"
placeholder="请输入用户名" onblur="checkUserName()" id="username" /><span id="userTip"></span>
</div>
<div id="pwdDiv">
密    码:<input type="password"
placeholder="请输入密码" id="pwd" onblur="checkPwd()" /><span id="pwdTip"></span>
</div>
<div id="rePwdDiv">
确认密码:<input type="password"
placeholder="两次密码输入信息一致" id="repwd" onblur="checkRePassword()" /><span id="repwdTip"></span>
</div>
<div id="emailDiv">
邮    箱:<input type="text"
placeholder="请输入 邮箱" id="email" onblur="checkEmail()" /><span id="emailTip"></span>
</div>
<div id="btnDiv">
<input type="submit" value="注册" />
</div>
</form>
</div>
</body>
</html>
<script>
/**
* 正则规则;
* 用户名:5-14位的数字或者字母组成
* 密码:6-10位的数子或者字母组成
* 确认密码:和密码一致
* 邮箱:满足基本邮箱格式
* 919081924@qq(163/126).com
* 企业邮箱:
* 企业名字@部门名字.com.cn....
*
*
*/
function checkAll(){
//将表单中表单项都需要校验
if(checkUserName() && checkPwd()
&& checkRePassword() && checkEmail()){
return true ;
}else{
return false ;
}
}
//校验用户名的函数
function checkUserName(){
//获取id="username"它所在的input标签对象,同时获取输入的内容
var username = document.getElementById("username").value ;
//alert(username) ;
//获取id="userTip"的span标签对象
var spanObj = document.getElementById("userTip") ;
//定义正则规则:
//5-14位的数字或者字母组成
var reg = /^[A-Za-z0-9_]{5,14}$/;
if(reg.test(username)){
//成立
spanObj.innerHTML = "恭喜您可用".fontcolor("green") ;
return true ;
}else{
//失败
spanObj.innerHTML = "对不起,格式有误".fontcolor("red") ;
return false ;
}
}
//校验密码
function checkPwd(){
//获取id="pwd" 的input标签对象,同时密码的内容
var pwd = document.getElementById("pwd").value ;
//获取 id="pwdTip"的span标签对象
var spanObj = document.getElementById("pwdTip");
//密码的正则规则:
//6-10位的数子或者字母组成
var reg = /^[A-Za-z0-9_]{6,10}$/ ;
if(reg.test(pwd)){
//成功
spanObj.innerHTML = "密码格式正确".fontcolor("green") ;
return true ;
}else{
spanObj.innerHTML="密码格式有误".fontcolor("red") ;
return false ;
}
}
//确认密码
function checkRePassword(){
//获取id="pwd" 的input标签对象,同时密码的内容
var pwd = document.getElementById("pwd").value ;
//获取id="repwd"的input标签对象,同时确认密码框的内容
var repwd = document.getElementById("repwd").value ;
//获取id="repwdTip"的span标签对象
var spanObj = document.getElementById("repwdTip") ;
if(repwd == pwd){
spanObj.innerHTML ="两次密码一致".fontcolor("green") ;
return true ;
}else{
spanObj.innerHTML ="两次密码不一致".fontcolor("red") ;
return false ;
}
}
//校验邮箱
function checkEmail(){
//获取id="email"的input标签对象.同时获取邮箱内容
var email = document.getElementById("email").value ;
//获取id="emailTip"的span标签对象
var spanObj = document.getElementById("emailTip") ;
//邮箱正则
/**
* 919081924@qq(163/126).com
* zhangsan@163.com..
* xxxx@126.com
* 企业邮箱:
* 企业名字@部门名字.com.cn....
*/
var reg = /^[A-Za-z0-9_]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/ ;
//匹配
if(reg.test(email)){
//成立
spanObj.innerHTML="邮箱格式正确".fontcolor("green") ;
return true ;
}else{
spanObj.innerHTML="邮箱格式有误".fontcolor("red") ;
return false ;
}
}
</script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
