JavaScript form表单提交与验证
原网址：https://blog.csdn.net/vipwxs/article/details/79119701
一、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> <!--这里必须要有"return ",checkForm()函数要有返回值true,false-->
四，表单提交的四种方法:
<form name="form1" method="post" action="login.php" onsubmit="return checkForm()" > </form> checkForm()需要return
<input type="submit" value="提交表单" onclick="return checkForm()" /> checkForm()需要return
<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="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>
JavaScript form表单提交与验证的更多相关文章
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
- Html form 表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...
- Django之form表单提交并验证
1.提交的时候会报错 2. 需要在setting里面注释掉一句话,关闭跨站请求检查. 3. 注释掉以后,理论上就不报错了.可我还是卡壳了. 4. 通过在网上找方法,修复错误. 原因:表单action字 ...
- Form表单提交，js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
- jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- jQuery判断 form表单提交时一些文本框的判断
一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...
- thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息
form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...
- jQuery补充之jQuery扩展/form表单提交/滚动菜单
jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...
随机推荐
- JVM02——JVM运行时内存
在上一篇文章中,我们介绍了 JVM 的内存区域,本文我们将继续围绕 JVM 展开话题,介绍 JVM 运行时内存.关注我的公众号「Java面典」了解更多 Java 相关知识点. Java 堆从 GC 的 ...
- JDK中线程池参详细解析
在jdk中为我们提供了三种创建线程池的方式,但是在阿里的编码规范里面都是明确禁止使用这三种api去创建线程池,推荐我们去自定义线程池.为什么? 要回答为什么,我们需要明白创建线程池时,各参数的作用: ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- iOS开发：UIColor转成纯色图片(UIImage)
Objective-c 版本 UIKIT_EXTERN UIImage * __nullable UIColorAsImage(UIColor * __nonnull color, CGSize si ...
- selenium3浏览器驱动设置
设置浏览器驱动: 1.首先手动创建一个存放浏览器驱动的目录,如: C:\driver , 将下载的浏览器驱动文件(例如:chromedriver.geckodriver)丢到该目录下. 2.打开计算机 ...
- 远程调试docker构建的weblogic
环境信息 OSType: CentOS Linux 7 (Core) x86_64 3.10.0-957.21.3.el7.x86_64 DockerVersion: 19.03.8 Mirrors: ...
- 题解 P2642 【双子序列最大和】
前言 其实这道题的关键就是在于预处理,其方法类似于 合唱队形 正文 求最大子段和 要想求出双子序列最大和,首先我们要会求出最大子段和 最大子段和的求值方法很简单 定义 \(f_i\) 为以第 \(i\ ...
- Selenium系列（十） - 针对Select下拉框的操作和源码解读
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- selenium 使用教程详解-java版本
第一章 Selenium 概述 1.1.Selenium 发展史 Selenium是一系列基于Web的自动化工具,提供一套测试函数,用于支持Web自动化测试.函数非常灵活,能够完成界面元素定位.窗 ...
- 在linux系统把node安装到全局 简单记录
1.在 根目录下建立 mysoft( 找一个放node 包) 2. 下载nodejs Linux版本(二进制),注意本教程是.tar.xz格式的. wget https://nodejs.org/di ...