原网址：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. 如何使用域名访问自己的Windows服务器（Java web 项目）

    如何使用域名访问自己的Windows服务器(Java web 项目) 写在前面 前段时间在阿里云弄了个学生服务器,就想着自己搭建一个网站试一试,在网上查阅相关资料时发现大部分都是基于服务器是Linux ...

  2. scrapy框架Request函数callback参数为什么是self.parse而不是self.parse( )

    加括号是调用函数,不加括号是指的是函数地址,此处只需要传入函数的地址,等待程序到时调用即可

  3. MySQL笔记（6）-- SQL更新语句日志系统流程

    一.背景 在上一篇[MySQL笔记(5)-- SQL执行流程,MySQL体系结构]中讲述了select查询语句在MySQL体系中的运行流程,从连接器开始,到分析器.优化器.执行器等,最后到达存储引擎. ...

  4. http服务部署

    [root@xiaoyi ~]# vim /etc/ssh/sshd_config 17行 Port 22 49行 PermitRootLogin yes 观察IP地址与物理机属于同一个网段 打开Fi ...

  5. 图-搜索-DFS-37. 解数独

    2020-03-24 22:23:32 问题描述: 编写一个程序,通过已填充的空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次.数字 1-9 在每一列只能出现一 ...

  6. 2019牛客多校第四场 A meeting

    链接:https://ac.nowcoder.com/acm/contest/884/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 524288K,其他语言10485 ...

  7. 参加Folding@Home(FAH)项目,为战胜新冠肺炎贡献出自己的一份力量

    鉴于新冠病毒(COVID-19)在全球范围内的大规模传播,PCMR和NVIDIA呼吁全球PC用户加入Folding@home项目贡献自己闲置的GPU计算力,协助抗击新冠状病毒疫情. 目前全球有超过40 ...

  8. 北邮OJ 89. 统计时间间隔 java版

    89. 统计时间间隔 时间限制 1000 ms 内存限制 65536 KB 题目描述 给出两个时间(24小时制),求第一个时间至少要经过多久才能到达第二个时间.给出的时间一定满足的形式,其中x和y分别 ...

  9. Redis 缓存更新一致性

    当执行写操作后,需要保证从缓存读取到的数据与数据库中持久化的数据是一致的,因此需要对缓存进行更新. 因为涉及到数据库和缓存两步操作,难以保证更新的原子性. 在设计更新策略时,我们需要考虑多个方面的问题 ...

  10. TortoiseGit 与 Putty 配置冲突导致 Server refuse our key

    tortoisegit是TortoiseSVN的Git版本,tortoisegit用于迁移TortoiseSVN到TortoiseGit,一直以来Git在Windows平台没有好用GUI客户端,现在t ...