用JavaScript操作HTML

 A. 事件处理:通常将鼠标或者热键的动作称为事件,由鼠标或热键引发的一连串程序动作,称为事件驱动。对事件进行处理的程序或函数称为事件处理程序。


  1. 窗口或页面的事件处理

事件 说明
onBlur 当前元素失去焦点时触发
onFocus 当某个元素获得焦点触发
onLoad 页面内容完成时触发
onUnload 页面退出或重置触发


    2.键盘或鼠标的事件处理

onClick 鼠标单击时触发
onDbClick 鼠标双击时触发
onMouseDown 按下鼠标时触发
onMouseMove 移动鼠标时触发
onMouseOut 离开某个对象范围触发
onMouseOver 移动到某个对象范围上触发
onMouseUp 按下鼠标后松开鼠标时触发
onKeyPress 键盘上某个键被按下并释放时触发
onKeyDown 键盘上某个键被按下时触发
onKeyup 键盘上某个键被放开时触发

   事件处理模型通常是用函数完成,事件=“函数名” 如<input type=”button” value=”Click Me” onclick=”testMethod”>


B.表单元素


  1. 表单元素的通用属性与方法

form属性:获取该表单控件所属的表单对象

name属性:获取或设置表单控件的名称

type属性:获取表单控件的类型

value属性:获取表单控件的值

focus方法:让表单控件对象获得焦点

blur方法:让表单对象失去焦点

   2.文本框

value属性:获得文本框的值,值是字符串类型

defaultValue属性:获得文本框的默认值,值是字符串类型

readonly属性:只读,文本框内容不能被修改

focus方法:获得焦点,即获得鼠标光标

blur方法:失去焦点

select方法:选中文本框内容,突出显示输入区域

  3.复选框

checked属性:复选框是否被选中,选中为true,未选中为false

value属性:设置或获取复选框的值

4.单选按钮

与复选框相似

5.下拉列表

length属性:选项个数

selectedIndex属性:当前被选中选项的索引

options属性:所有选项组成一个数组,options表示整个选项数组,第一个选项即为options[0]。

option的value属性:<option>标记中的value所指定的值

option的text属性:显示与界面中的文本,即<option>…</option>之间的部分

增加选项:每个选项都是一个option对象,可以创建option对象,然后添加到select的末尾 如select.options[select.length]=new Option(text,value);

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function gg(){ var opObjeect=document.forms[0].elements["cities"]; for(var i=0;i<opObjeect.options.length;i++){ if(opObject.options[i].selected) { alert(opObjeect.options[i].value); alert(opObjeect.options[i].text); } } //增加列表项 opObjeect.options[opObjeect.length]=new Option("新增"+1,"new"+1); }</script> </head><body><form action=""><select name="cities" onchange="gg()"> <option value="dalian">大连</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option></select></form></body></html>

用JavaScript操作HTML

用JavaScript操作HTML

C表单验证

用户在表单中输入的内容提交到服务器之前,在客户端利用表单控件产生的事件,利用正则表达式验证输入数据的有效性。

正则表达式:(有点复杂,百度搜就行)

常见如下

1匹配中文:[\u4e00-\u9fa5]

2、英文字母:[a-zA-Z]

3、数字:[0-9]

4、匹配中文,英文字母和数字及下划线:^[\u4e00-\u9fa5_a-zA-Z0-9]+$
同时判断输入长度:
[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}

5、不能以_开头 (?!_)  不能以_结尾 (?!.*?_$)  
至少一个汉字、数字、字母、下划线[a-zA-Z0-9_\u4e00-\u9fa5]+   与字符串结束的地方匹配 $ 

6、只含有汉字、数字、字母、下划线,下划线位置不限:
^[a-zA-Z0-9_\u4e00-\u9fa5]+$

7、由数字、26个英文字母或者下划线组成的字符串 ^\w+$

8、2~4个汉字 “^[\u4E00-\u9FA5]{2,4}$”;

9、最长不得超过7个汉字,或14个字节(数字,字母和下划线)正则表达式
^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
 

10、匹配双字节字符(包括汉字在内):[^x00-xff]
评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

11、匹配空白行的正则表达式:ns*r
评注:可以用来删除空白行

12、匹配HTML标记的正则表达式:<(S*?)[^>]*>.*?|<.*? />
评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力

13、匹配首尾空白字符的正则表达式:^s*|s*$
评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式

14、匹配Email地址的正则表达式:^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$

评注:表单验证时很实用

15、手机号:^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$

16、身份证:(^\d{15}$)|(^\d{17}([0-9]|X|x)$)

示例:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title> <script type="text/javascript"> function checkEmail(){ var exp=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if(!exp.test(document.forms[0].email.value)){ alert("Email格式错误"); document.forms[0].email.focus(); return false; }else{ alert("Email格式正确"); return true; } }</script></head><body><form action=""> Mail:<input type="text" name="email"/><br> <input type="button" value="提交" onclick="return checkEmail()"/></form></body></html>

正确输入的情况

用JavaScript操作HTML

用JavaScript操作HTML

错误输入的情况

用JavaScript操作HTML

用JavaScript操作HTML

来源:码农迪迪,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/87593

发表评论

电子邮件地址不会被公开。 必填项已用*标注

侵权联系
分享本页
返回顶部