原网址：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. 深度学习与人类语言处理-语音识别(part3)

    上节回顾深度学习与人类语言处理-语音识别(part2),这节课我们接着看seq2seq模型怎么做语音识别 上节课我们知道LAS做语音识别需要看完一个完整的序列才能输出,把我们希望语音识别模型可以在听到 ...

  2. 聊聊OkHttp实现WebSocket细节，包括鉴权和长连接保活及其原理！

    一.序 OkHttp 应该算是 Android 中使用最广泛的网络库了,我们通常会利用它来实现 HTTP 请求,但是实际上它还可以支持 WebSocket,并且使用起来还非常的便捷. 那本文就来聊聊, ...

  3. Apex_1. 解决“违反主键约束性”

    1.有创建序列号的可以把序列号调到当前记录ID的最大值+1: 2.进入系统文件system.properties,找到下面代码,把system.id.generator.type的值改为1: #系统默 ...

  4. ElegantSnap 一个优雅的，易用的iOS/tvOS/macOS自动布局框架, 超级详细的使用教程，多视图水平等宽/垂直等高排列

    ElegantSnap ElegantSnap(Base on SnapKit) to make Auto Layout easy and elegant on both iOS and OS X. ...

  5. .NET的资源并不限于.resx文件（二）

    ResourceManager在默认的情况下只能提供对内嵌于程序集的.resources资源文件的存取. 为了实现对独立二进制.resources资源文件的支持,我们自定义了BinaryResoruc ...

  6. python基础知识8——常见内置模块

    Python之路-python(常用模块学习) 模块介绍 time &datetime模块 random os sys shutil shelve xml处理 yaml处理 configpar ...

  7. Drawing Simple Polygon(Create Simple Polygon from unordered points by angle sorting)

    Keywords: 极角排序, Simple Polygon Generation Given set of points in the plane, your task is to draw a p ...

  8. ShedLock-jdbc配置锁

    项目初期为了快速响应业务开发,对于部分业务需要使用到定时任务功能模块,会直接嵌入到主流程代码中间.当业务增加,发展成分布式服务时,那些定时任务对整体而言重复执行.如果避免分布式服务中的定时任务单一执行 ...

  9. word2vec 和 glove 模型的区别

    2019-09-09 15:36:13 问题描述:word2vec 和 glove 这两个生成 word embedding 的算法有什么区别. 问题求解: GloVe (global vectors ...

  10. Python-类的特性

    ------------恢复内容开始------------ 类及类的定义 Cat类 类的特殊方法-构造函数.析构函数 class Cat: # 构造函数 def __init__(self, nam ...