原网址：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. 基于Linux Lite 4.8制作“Windows 12 Lite”正式发布

    值得注意的是,这款Windows 12 Lite的宣传标语将矛头直指Windows 10,声称不会迫使用户更新.不会存在病毒或恶意软件.启动速度比Win 10快3倍.提供8万多款优质软件.允许与Win ...

  2. BrowserSync(保存代码后，自动刷新浏览器)

    摘要 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项 ...

  3. 前端要了解的seo

    一.搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果.深究其背后的故事,搜索引擎做了很多事情. 在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关 ...

  4. python基础学习day02

    pycharm的安装以及简单使用 辅助开发软件,代码逐行调试,设计高端 python的种类: ​ CPython:官方推荐可以转换成c能够识别的字节码. ​ JPython:可以转化为Java语言能够 ...

  5. 【Python】2.11学习笔记 注释,print,input,数据类型,标识符

    前面学了好多内存什么的知识,没什么用(我有眼不识泰山233 吐槽一句,这课简直就是讲给完全的编程小白听得 就从语言开始写吧(其实好多已经看过了,再来一遍 话说我已经忘了\(Markdown\)怎么写了 ...

  6. 【Weiss】【第03章】练习3.18：检查平衡符号

    [练习3.18]用下列语言编写检测平衡符号的程序 a.Pascal ( begin/end, ( ), [ ], { } ). b.C语言( /* */, ( ), [ ], { }). c.解释如何 ...

  7. vscode如何配置debug,python正则表达式如何匹配括号,关于python如何导入自定义模块

    关于vscode如何配置debug的问题: 1.下载安装好python,并且配置好 环境变量 2.https://www.cnblogs.com/asce/p/11600904.html 3.严格按照 ...

  8. Mybatis在xml配置文件中处理SQL中的大于小于号的方法

    之前在项目中遇到了在SQL中<=不识别的问题,在Navicat中语句正常,在xml中不识别,想起来就记录一下 项目用的是Mybatis,经过网上多次查询,验证,总结方法如下: 一.使用<! ...

  9. reset slave all更彻底

    reset slave是各版本Mysql都有的功能,可以让slave忘记自己在master binary log中的复制位置. reset slave命令主要完成以下工作内容: -删除master.i ...

  10. IP协议的助手 —— ICMP 协议

    IP协议的助手 —— ICMP 协议 IP协议的助手 —— ICMP 协议 ping 是基于 ICMP 协议工作的,所以要明白 ping 的工作,首先我们先来熟悉 ICMP 协议. ICMP 是什么? ...