1、访问表单对象的常用方法：

①：根据元素的id属性；

var myform=document.getElementById("myformid");  //myformid是某个元素的ID；

②：根据元素的name属性；

var myform=document.forms["myformname"]; 　　//myformname是某个元素的名称；

③：直接使用表单名访问表单：

var myform=document.myformname;　　　　//myformname是某个元素的名称；

2、表单的常用事件：

①onsubmit事件：点击“提交”按钮的时候会触发此事件，并且可能阻止表单提交。例：表单的验证；

②onchange事件：当用户更改内容，并且文本框失去焦点的时候触发此事件；

例：表单提交

前台界面：

前台界面的代码：

JS脚本：

function yanzheng() {
var b;
var a = document.getElementById("username"); //获取用户名值
var p = document.getElementById("password"); //获取密码值
var age = myform.age.value; //获取年龄值
if (a.value.length < 5 || a.value.length > 10) {
alert("您输入的用户名格式错误！");
return false;
}
else if (p.value.length < 5) {
alert("密码长度少于5！");
return false;
}
else if (!checkage(age)) {
return false;
}
else {
return true;
}
}
function checkage(a) { //检测年龄
var ch, age;
for (var i = 0; i < a.length; i++) {
ch = a.charAt(i);
if (ch < "0" || ch > "9") {
alert("请在年龄选项中输入数字！");
return false;
}
}
age = parseInt(a);
if (age < 10 || age > 100) {
alert("年龄不真实！");
return false;
}
return true;
}
function checkinfo() { //显示所有的信息
var username = myform.username.value; //获取用户名
var password = myform.password.value; //获取密码
var age = myform.age.value; //获取年龄
var sex = myform.sex; //获取性别
var osex = ""; //设置一个变量获取性别的选项
var content = myform.content; //获取内容
var ocontent = ""; //设置一个变量获取内容的选项
var eduleave = myform.edu_level; //获取学历
var oedu = ""; //设置一个变量获取学历的选项
var intersent = myform.like; //获取表单爱好
var olike = ""; //设置一个变量获取爱好的选项
for (var i = 0; i < sex.length; i++) { //性别
if (sex[i].checked) {
osex = sex[i].value;
}
}
for (var i = 0; i < content.length; i++) { //内容
if (content[i].checked) {
ocontent += content[i].value + " ";
}
}
for (var i = 0; i < eduleave.length; i++) { //学历
if (eduleave.selectedIndex >= 0) {
oedu = eduleave.options[eduleave.selectedIndex].text;
}
}
for (var i = 0; i < intersent.length; i++) { //爱好
if (intersent.options[i].selected) {
olike += intersent.options[i].text + " ";
}
}
alert("您的用户名为：" + username + "\n密码为：" + password + "\n年龄为：" + age + "\n性别为：" + osex + "\n内容为：" + ocontent + "\n学历为：" + oedu + "\n兴趣爱好为：" + olike);
}
function passwordleave() {
var passwordleavel = myform.password.value;
if (passwordleavel.length == "") {
document.getElementById("Button1").style.display = "none";
document.getElementById("Button2").style.display = "none";
document.getElementById("Button3").style.display = "none";
}
else {
if (passwordleavel.length <= "5") {
document.getElementById("Button1").style.display = "";
document.getElementById("Button2").style.display = "none";
document.getElementById("Button3").style.display = "none";
}
else if (passwordleavel.length <= "10") {
document.getElementById("Button1").style.display = "";
document.getElementById("Button2").style.display = "";
document.getElementById("Button3").style.display = "none";
}
else {
document.getElementById("Button1").style.display = "";
document.getElementById("Button2").style.display = "";
document.getElementById("Button3").style.display = "";
}
}
}
function startbody() {
document.getElementById("Button1").style.display = "none";
document.getElementById("Button2").style.display = "none";
document.getElementById("Button3").style.display = "none";
}