原网址：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表单提交与验证的更多相关文章

  1. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

  2. Html form 表单提交前验证

    可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...

  3. Django之form表单提交并验证

    1.提交的时候会报错 2. 需要在setting里面注释掉一句话,关闭跨站请求检查. 3. 注释掉以后,理论上就不报错了.可我还是卡壳了. 4. 通过在网上找方法,修复错误. 原因:表单action字 ...

  4. Form表单提交，js验证

    Form表单提交,js验证 1,  Onclick() 2, Onsubmit() Button标签 input (属性 submit  button )标签 Input type=button    ...

  5. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. jQuery判断 form表单提交时一些文本框的判断

    一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...

  8. thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  9. jQuery补充之jQuery扩展/form表单提交/滚动菜单

    jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...

随机推荐

  1. R自带数据集

    向量 euro    #欧元汇率,长度为11,每个元素都有命名landmasses    #48个陆地的面积,每个都有命名precip   #长度为70的命名向量rivers   #北美141条河流长 ...

  2. vue项目 github 上传项目并链接地址

    git init git init: 通过命令git init把这个文件夹变成Git可管理的仓库git status git status:查看当前仓库状态 git add . 这里提示你虽然把项目粘 ...

  3. EPX-Studio调用Dll模块

    procedure TForm1.BitBtn1Click(Sender: TObject); var REP : IExcelPanelXDisp; modulePath:string; begin ...

  4. 我用STM32MP1做了个疫情监控平台4—功能完善界面重新设计

    目录 前言 界面展示 新增功能 API 接口说明 多个接口数据的获取和解析 FontAwesome字体图标库的使用 代码下载 系列教程 @ 前言 之前我用STM32MP1和Qt实现了疫情监控平台,系列 ...

  5. oracle中pl/sql 练习题----输入部门编号，在控制台打印这个部门的名称，总人数，平均工资（基本工资+奖金）

    一. 思路:声明record类型的变量,根据 多表联合查询查出想要的数据,最后输出. 二.注意:record类型不一定只是一个表中的数据,也可以声明不同表中的数据类型. 三.语句如下: declare ...

  6. redis 持久化RDB、AOF

    1.redis持久化简介 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集合和有序集合.支持在服务器端计算集合 ...

  7. 最详细的 Spring Boot 多模块开发与排坑指南

    创建项目 创建一个 SpringBoot 项目非常的简单,简单到这里根本不用再提.你可以在使用 IDEA 新建项目时直接选择 Spring Initlalize 创建一个 Spring Boot 项目 ...

  8. Error 不再支持源选项 5。请使用 6 或更高版本。

    解决方案:在项目pom.xml中指定JDK版本 我的jdk版本是11.0.2 所以写的是11 根据你自己的jdk版本写 1.7/1.8~~~~ <properties>元素时根元素< ...

  9. 环境篇：Docker

    环境篇:Docker www.docker.com Docker 是什么? Docker 是一个开源的应用容器引擎,基于Go语言并遵从Apache协议的开源,让开发者可以打包他们的应用以及依赖包到一个 ...

  10. CentOS7系统服务管理systemctl

    目录 一.systemctl介绍 二.systemctl常用命令 1.启动服务 2.停止服务 3.重启服务 4.查看服务是否已启动 5.查看服务的状态 6.启用开机自启动服务 7.停用开机自启动服务 ...