原网址：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. c++第一章1.6

    测试已完成(bingo)     1 [单选题] 下面代码能够实现交换操作的函数有(       )   A. swap(int a,int b) { int t=a;a=b;b=t;} B. swa ...

  2. Simulink仿真入门到精通（十） S函数

    10.1 S函数概述 S函数也称为Simulink中的系统函数,是用来描述模块的Simulink宏函数,支持M.C等多种语言.当Simulink默认的模块不能满足用户的需求时,用户可以通过S函数自己打 ...

  3. 为什么vue中的data用return返回呢？

    不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一个组件被定义, data 必须声明为返回一个初始数据对象的函 ...

  4. [红日安全]Web安全Day12 – 会话安全实战攻防

    本文由红日安全成员: ruanruan 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目起了 ...

  5. 包和访问权限修饰符，.单例设计模式，.Object类常用方法，.内部类

    1.包和访问权限修饰符 1.1 包 为什么要导包? 将字节码文件(.class)文件进行分类存放 --->包 其实就是文件夹 import java.util.Arrays; 包的划分规则 方案 ...

  6. 单片机的 HexToStr HexToBcd BcdToStr 几个转换函数

    今天写单片机一个程序 要检查一些数据,想发到串口调试的软件上在电脑上查看 有些转换函数 想网上找一个 看看都是很多的垃圾文章 很多的程序都不能用,那些发文章的人也不用心 所以我还是自己动手写一下吧 写 ...

  7. NBL小可爱纪念赛「 第一弹 」 游记（部分题解）

    比赛链接 洛谷:禁止含有侮辱性质的比赛 . ??? 反正我觉得,gyx挺危险的 不说废话. 首先,比赛经验,前几个小时不打,跟着刷榜. 一看 T1. 发现是道水题,直接切掉了. 然后看到了 T2. 感 ...

  8. 动态规划-计数dp-Distinct Subsequences II

    2020-02-06 17:01:36 问题描述: 问题求解: 非常经典的计数dp问题,思路就是统计以每个字符为结尾的个数,最后求和即可. dp[i] = sum of (dp[j]) 0 <= ...

  9. docker image换包步骤

    Docker Commit 1.在IDEA中通过maven package得到watchman-1.5.0-SNAPSHOT.jar,将其scp到baisheng1本地: 2.查看dbaservice ...

  10. 痞子衡嵌入式：记录i.MXRT1060驱动LCD屏显示横向渐变色有亮点问题解决全过程（提问篇）

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1060上LCD横向渐变色显示出亮点问题的分析解决经验. 痞子衡前段时间在支持一个i.MXRT1060客户项目时遇到了LCD ...