JavaScript第九讲：JavaScript表单对象

最新推荐文章于 2021-06-27 20:56:55 发布

原创最新推荐文章于 2021-06-27 20:56:55 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #web

JavaScript教程专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了JavaScript中处理表单的对象和方法，包括getElementById、forms属性、表单属性如action、method、enctype、title，以及各种事件处理如focus、blur、onchange和onsubmit。通过多个实例演示了如何在表单中设置初始焦点、更改表单提交地址、验证必填字段等操作，帮助读者掌握JavaScript与HTML表单交互的技巧。

本节主要讲解JavaScript表单对象，以下是具体详细实例。

表单对象：

document.getElementById();

document.forms.username

document.frm1.username

本身表单的属性，都可以使对象的属性

action

method

enctype

title

submit()

focus()//获取焦点时触发的事件

blur();//失去焦点

onchange//内容改变触发的事件

在form上有一个事件onsubmit（）

例1

载入页面时登陆页面的username自动获取焦点

例2

<body>

username:<input type="text" name="username" value=""><br>

password:<input type="password" name="password" value=""><br>

</form>

<h1 onclick="test()">login h1</h1>

</body>

function test(){

var frmobj=document.frm;

frmobj.action="index.php";

frmobj.target="_blank";

frmobj.method="get";

frmobj.submit();//调用这个方法就能提交，注意input的名字叫submit不能与内置的submit（）方法重。非常容易出错

}

setTiemout("test()",10000);

</script>

例3 //不能为空

<body>

username:<input type="text" name="username" value=""><br>

password:<input type="password" name="password" value=""><br>

</form>

</body>

function check(){

if(document.frm.username.value==''){

alert('用户名不能为空');

return false;

}

if(document.frm.password.value==""){

alert('密码不能为空');

return false;

}

return true;

}

</script>

例4 //不能为空后返回获取焦点

<body>

username:<input type="text" name="username" value=""><br>

password:<input type="password" name="password" value=""><br>

</form>

</body>

function check(){

var info="";

var stats=true;

if(!document.frm.username.value.match(/^\s+$/)){ //正则,不能输入空格

info+="用户名不能为空！\n";

// document.frm.username.focus();

stats=false;

}

if(document.frm.password.value==""){

info+="密码不能为空 \n";

// document.frm.password.focus();

stats=false;

}

if(!stats)

alert(info);

return stats;

}

</script>

例5

<body>

username:<input type="text" name="username" onblur="one()" value=""><br>

password:<input type="password" name="password" onblur="two()" value=""><br>

</form>

</body>

function one(){

if(!document.frm.username.value.match(/^\s+$/)){

alert("用户名不能为空");

//document.frm.username.focus();

}

function two(){

if(!document.frm.password.value==""){

alert("用户密码不能为空");

// document.frm.password.focus();

}

function check(){

var info="";

var stats=true;

if(!document.frm.username.value.match(/^\s+$/)){ //正则,不能输入空格

info+="用户名不能为空！\n";

// document.frm.username.focus();

stats=false;

}

if(document.frm.password.value==""){

info+="密码不能为空 \n";

// document.frm.password.focus();

stats=false;

}

if(!stats)

alert(info);

return stats;

}

</script>