JavaScript form对象，表单简单验证

来源：互联网发布：双旗镇刀客知乎编辑：程序博客网时间：2024/05/22 04:57

一、form对象的属性
name：获取表单的名称，该name一般给JS使用。
method：表单提交方法。
GET方式：不安全、数据量较小、不能上传附件。
POST方式：相对安全、海量数据、能上传附件。
action：表单数据的处理程序。一般是PHP文件。
enctype：表单数据的编码方式(加密)。
application/x-www-form-urlencoded 默认
multipart/form-data 可以上传附件

二、表单中通过name属性找对象
通过name找对象，必须是document开头。一般在表单中使用name，其他标签用id，<div>用id。
通过name找对象，必须要符合三层结构。
格式：document.formObj.elementObj

三、事件返回值
事件的返回值，会影响事件的默认动作。
如果事件返回值为false，则阻止默认动作执行。
如果事件返回值为true或空，则默认动作执行。
如果事件没有任何返回值，则默认动作执行。
受影响的事件有两个：onclick、onsubmit
其它事件的返回值，不会影响默认动作。

例如：<form name="form1" method="post" action="login.php" onsubmit="return checkForm()" > </form>

四、表单提交的三种方法：
1、submit按钮，结合form标签的onsubmit事件。 <form name="form1" method="post" action="login.php" onsubmit="return checkForm()" > </form> checkForm()需要return
2、submit按钮，结合onclick事件。 <input type="submit" value="提交表单" onclick="return checkForm()" /> checkForm()需要return
3、button按钮，结合onclick事件。 <input type="button" value="提交表单" onclick="return checkForm()" /> js中：checkForm(){document.form1.submit();} 不需要return

实例代码：表单简单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">//实例：表单验证function focus_username(){//获取id=result_username的元素对象var divObj = document.getElementById("result_username");//写入提示信息divObj.innerHTML = "请输入你的用户名";divObj.style.color = "#ccc";}function blur_username(){//获取name=username和id=result_username的元素对象var inputObj = document.form1.username;var divObj = document.getElementById("result_username");//用户名验证if(document.form1.username.value==""){divObj.innerHTML = "对不起，用户名不能为空！";divObj.style.color = "red";return false;}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20){divObj.innerHTML = "用户名长度必须介于5-20个字符之间！";divObj.style.color = "red";return false;}else{divObj.innerHTML = "<img src='images/ok.gif' />";return true;}}function focus_userpwd(){//获取id=result_userpwd的元素对象var divObj = document.getElementById("result_userpwd");//写入提示信息divObj.innerHTML = "请输入你的密码";divObj.style.color = "#ccc";}function blur_userpwd(){//获取name=username和id=result_userpwd的元素对象var inputObj = document.form1.userpwd;var divObj = document.getElementById("result_userpwd");//用户名验证if(document.form1.userpwd.value==""){divObj.innerHTML = "对不起，密码不能为空！";divObj.style.color = "red";return false;}else if(document.form1.userpwd.value.length<5 || document.form1.userpwd.value.length>20){divObj.innerHTML = "密码长度必须介于5-20个字符之间！";divObj.style.color = "red";return false;}else{divObj.innerHTML = "<img src='images/ok.gif' />";return true;}}function checkForm(){var flag_username = blur_username();var flag_userpwd = blur_userpwd();if(flag_username && flag_userpwd){//提交表单return true;}else{//阻止表单提交return false;}}</script></head><body><form name="form1" method="post" action="login.php" onsubmit="return checkForm()"><table width="600" border="1" bordercolor="#ccc" rules="all" align="center" cellpadding="5"><tr><th colspan="3" bgColor="#f0f0f0">用户登录</th></tr><tr><td width="80" align="right">用户名：</td><td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td><td width="350"><div id="result_username"></div></td></tr><tr><td width="80" align="right">密码：</td><td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td><td><div id="result_userpwd"></div></td></tr><tr><td> </td><td colspan="2"><input type="submit" value="提交表单" /></td></tr></table></form></body></html>

阅读全文

0 0