1、获得表单

基本语法

var 变量名 = document.getElementsByName(“表单name”);
var 变量名 = document.getElementById(“表单id”);
var 变量名 = document.表单名；

功能

document.getElementsByName(“表单name”); 通过表单名称获得表单
document.getElementById(“表单id”); 通过表单id获得表单
document.表单名； 通过表单名称获得表单

代码

<!DOCTYPE html>

2、操纵表单元素

基本语法

document.表单名.表单元素名.属性名=”值”;
document.表单名.表单元素名.style.样式名=”值”;
document.getElementById(“id”).属性名=”值”;
document.getElementById(“id”).style.样式名=”值”;

功能

document.表单名.表单元素名.属性名=”值”;
通过表单名表单元素名设置表单元素的属性
document.表单名.表单元素名.style.样式名=”值”;
通过表单名表单元素名设置表单元素的样式
document.getElementById(“id”).属性名=”值”;
通过表单元素的Id设置表单元素的属性

document.getElementById(“id”).style.样式名=”值”;
通过表单元素的Id设置表单元素的样式

代码

<!DOCTYPE html>

姓名：
年龄：

代码讲解

1、通过表单元素名设置表单元素

document.form1.userName.value=”abc”; 通过表单名表单元素名设置表单元素的value为abc
document.form1.userName.style.fontSize=”20px”; 通过表单名表单元素名设置表单元素的字体大小为20像素

2、通过表单元素的Id设置表单元素

document.getElementById(“age”).value=”23”; 通过表单元素的Id设置表单元素的value为23
document.getElementById(“age”).style.color=”green”; 通过表单元素的Id设置表单元素的字体颜色为绿色

3、焦点事件

基本语法

功能

onfocus=”函数名()” 当表单元素获得焦点后执行函数
onblur=”函数名()” 当表单元素失去焦点后执行函数

代码

<!DOCTYPE html>

姓名：
年龄：

8、表单验证 - 图3 代码讲解

1、获得焦点

function func1(){
document.getElementById(“userName”).value = “”;设置 id为userName 的表单元素的value为空
}

2、失去焦点

function func2(){
var userName = document.getElementById(“userName”).value;
alert(“姓名：” + userName);
}
var userName = document.getElementById(“userName”).value; 获得id为userName 的表单元素的value值

4、表单验证

（1）事件

onreset()：点击重置按钮后触发的事件
onsubmit()：点击提交按钮时触发的事件
注：onsubmit(return 布尔值)，如果为true点击提交按钮可以提交到相应的地址；如果为false不能提交数据、不能提交到相应的地址；如果括号里为空，默认值为true

代码

<!DOCTYPE html> //表单name为“from1”；提交方式为“get”；表单提交后提交到“http://www.baidu.com”

登录名称：

登录密码：

8、表单验证 - 图4 代码讲解

1、登录名称验证

var userName = document.getElementById(“userName”).value;
if(userName == “”){
alert(“请输入登录名称！”);
return false;
}
var userName = document.getElementById(“userName”).value; 获取登录名称
if(userName == “”) 判断登录名称是否为空
alert(“请输入登录名称！”); 提示填写登录名称
return false; 返回false

2、登录密码验证

var passWord = document.getElementById(“passWord”).value; 获取登录密码
if(passWord == “”) { 判断登录密码是否为空
alert(“请输入登录密码！”); 提示填写登录密码
return false; 返回false
}