您的位置：首页 > Web前端 > JavaScript

JavaScript form对象，表单简单验证

2018-01-21 14:37 639 查看

一、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按钮，结合onclik事件。 <input type="submit"
value="提交表单" onclick="return checkForm()" /> checkForm()需要return

3.button按钮，结合onclik事件，
<input type="button" value="提交表单" onclick="return checkForm()" /> js中：checkForm(){document.form1.submit();} 不需要return

实例代码：表单简单验证：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单简单验证</title>
</head>
<body>
<form action="login.php" name="form1" method=[/b]"post" onsubmit="return checkForm()">
<table width="600" border="1" bordercolor="#ccc" rules="all" align="center" cellpadding="5">
<tr>
<th colspan="3" bgcolor="#0f0f0f">用户登录</th>
</tr>
<tr>
<td width="80" align="right">用户名:</td>
<td><input type="text" name="userName" onfocus="onfocus_userName()" onblur="onblur_userName"/></td>
<td width="350"><div id="result_username"></div></td>
</tr>
<tr>
<td width="80" align="right">用户密码:</td>
<td><input type="text" name="userPwd" onfocus="onfocus_userPwd()" onblur="onblur_userPwd"/></td>
<td width="350"><div id="result_userPwd"></div></td>
</tr>

<tr>
<td></td>
<td colspan="2"><input type="submit" value="提交表单"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*用户名*/
//获取焦点:当光标接入某个文本框时触发
function onfocus_userName(){
/*获取id=result_username的元素对象*/
var divObj=document.getElementById("result_username");
/*写入提示信息*/
divObj.innerHTML="请输入您的用户名:";
divObj.style.color="#ccc";
}
//失去焦点:当光标离开某个文本框时触发
function onblur_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="ok";
return true;
}
}

/*用户密码*/
//获取焦点:当光标接入某个文本框时触发
function onfocus_userPwd(){
/*获取id=result_userPwd的元素对象*/
var divObj=document.getElementById("result_userPwd");
/*写入提示信息*/
divObj.innerHTML="请输入您的密码:";
divObj.style.color="#ccc";
}
//失去焦点:当光标离开某个文本框时触发
function onblur_userPwd(){
/*获取name=userPwd和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="ok";
return true;
}
}
function checkForm(){
var flag_userName=onblur_userName();
var flag_userPwd=onblur_userPwd();
if(flag_userName&&flag_userPwd){
/*提交表单*/
return true;
}else{
//阻止表单提交
return false;
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航