最近在做验证的时候遇到了submit()与onsubmit()事件冲突的问题，本来想在a标签中添加submit()进行表单的提交，然后在 form中添加onsubmit事件触发验证方法。结果行不通，最后只能选择在java script中进行表单的提交。方案如下：

设置form头部如下：添加id是为了在java script脚本中进行中获取form对象

<form method="post" action="AdminServlet" id="Loginform" >

在a标签中添加onClick()事件，触发java script表单验证的方法loginLayoutValidate()

<a href="javascript:void(0)"   onClick="loginLayoutValidate()"/> 
    function loginLayoutValidate(){

        var userName=document.getElementById("userName");

        var passWord= document.getElementById("passWord");

        var validateCode=document.getElementById("validateCode");

        if(userName.value.trim()==""){

            alert("用户名不能为空");

            return ;

        }

        else if(passWord.value.trim()==""){

            alert("密码不能为空");

            return ;

        }

        else if(validateCode.value.trim()==""){

            alert("请输入验证码");

            return ;

        }

        else{

                document.getElementById("Loginform").submit();

        }

    }

例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

    function submitcheck() {

        if (document.getElementById('name').value == '') {

            alert('必须输入网站名！');

            document.getElementById('name').focus();

            return false;

        } else if (document.getElementById('ftp_url').value == '') {

            alert('必须输入Ftp地址！');

            document.getElementById('ftp_url').focus();

            return false;

        } else {

            document.getElementById('fm_1').submit();

        }

    }

    </script>

</head>

<body>

    <form action="#" id="fm_1" name="fm_1">

        <input type="text" id="name" name="name" required="required">*

        <br>

        <input type="text" id="ftp_url" name="ftp_url">*

        <br>

        <input type="submit" value="提交">

        <br>

        <input type="reset" value="重置">

        <br>

        <a href="javascript:void(0)" onclick="checkform()">提交</a>

        <br><a href="#" onclick="document.fm_1.reset()">重置</a>

    </form>

</body>

</html>

a 标签提交前验证的更多相关文章

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

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

  2. jQuery Validate验证框架详解，提交前验证

    现在都用h5表单进行验证了,以下方式仅做回忆 https://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE HTML P ...

  3. 使用jquery.validate组件进行前端数据验证并实现异步提交前验证检查

    学习如鹏网掌上组的项目开发,使用到了前端验证,视频里使用的ValidateForm验证框架,但是我使用的Hui的框架中使用的是jquery.validate验证框架 所以自行学习jquery.vali ...

  4. Html form 表单提交前验证

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

  5. springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）

    这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

  6. 利用javascript对提交数据验证

    优点:提交前验证.在客户端进行. <html> <head> <script language="javascript"> function c ...

  7. a标签指定的url，在表单提交前进行js验证的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 验证控件,解决用于ajax提交前的验证，不是submit提交的验证

    //解决ajax提交前的验证问题,主要用于onclick事件时对某一区域中(可以是form,div,table中的等)控件的验证.(function ($) { var v; //Create a n ...

  9. form的onsubmit事件--表单提交前的验证最佳实现方式

    今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type=“submit”域,然后js中写入sumbit.click来执 ...

随机推荐

  1. MongoDB学习笔记(数据操作)

    1.  批量插入:     以数组的方式一次插入多个文档可以在单次TCP请求中完成,避免了多次请求中的额外开销.就数据传输量而言,批量插入的数据中仅包含一份消息头,而多次单条插入则会在每次插入数据时封 ...

  2. 嵌入式: jffs2,yaffs2,logfs,ubifs文件系统性能分析

    在嵌入式领域,FLASH是一种常用的存储介质,由于其特殊的硬件结构,所以普通的文件系统如ext2,ext3等都不适合在其上使用,于是就出现了专门针对FLASH的文件系统,比较常用的有jffs2,yaf ...

  3. 横向图片墙排列算法及demo

    演示地址: http://codeman35.itongyin.com:19005/v1/9gg_v2.html 功能: 按照不同的图片比例,进行横向9宫格排列,原则是尽量排列的整齐,不要多余出来格子 ...

  4. sql 时间(datetime)计算

    SELECT *FROM sc_sowu_orderreturnWHERE STATUS = '0'AND submit_time < DATE_ADD(now(), INTERVAL - 4 ...

  5. CSAPP学习笔记(异常控制流1)

    1:诸如子进程结束之后父进程需要被告知,有时候应用程序需要系统调用,内核通过上下文切换将控制从一个进程切换到另一个进程,还有一个进程发送信号到另一个进程时接收者转而到它的信号处理函数去执行等等,我们的 ...

  6. asp.net的JSONHelper 类

    调用方法: ){    jsons = json.ToString();}else{    jsons = @"{success:false}";}return jsons; JS ...

  7. 【c++】虚基类

    何要使用虚基类: 为何避免多层继承中出项多个公共基类所造成的歧义现象 虚基类用法 派生类继承基类时,加上一个virtual关键词则为虚拟基类继承. 在上图程序运行中,我们发现class bass的构造 ...

  8. Jenkins自动部署Tomcat项目

    Jenkins自动部署Tomcat项目 1.安装jenkins 插件 启动Jenkins,进入系统管理-插件管理: 选择Deploy to container Plugin 插件安装:

  9. 利用nginx来屏蔽指定的user_agent的访问以及根据user_agent做跳转

    对于做国内站的我来说,我不希望国外蜘蛛来访问我的网站,特别是个别垃圾蜘蛛,它们访问特别频繁.这些垃圾流量多了之后,严重浪费服务器的带宽和资源.通过判断user agent,在nginx中禁用这些蜘蛛可 ...

  10. kindeditor富文本框，上传文件后，显示文件名称

    kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...