a 标签提交前验证

最近在做验证的时候遇到了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>
时间: 2024-10-10 14:59:47

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

form表单提交,上传文件以及提交前验证的问题。

form表单是在开发中比较基础也比较常见的问题了,今天就给大家分享一下有关form表单提交的一些小问题. 首先我们来看一下基本的form结构.这里面我直接引用的bootstrap的form表单的框架. <form class="form-horizontal" id="form1" name="myForm" action="/cgjxx/fwjl_delete_servlet" method="post&qu

Yii表单验证中,提交前验证,不通过不提交

$form = $this->beginWidget('CActiveForm',array(         'id' => 'add_host',         'enableAjaxValidation' => false,         'enableClientValidation' => true,         'clientOptions' => array(                 'validateOnSubmit' => true  

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

1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后返回 returning 405 Method Not Allowed 原因是我后台返回的时候没有加上: @ResponseBody注解.加上后返回的数据是json字符串,但是js只能操作json对象.需要把json字符串转为json对象.一般的有三种方式1.JSON.parse();如 var j

Html form 表单提交前验证

可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 <HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 </head> 5 <BODY>

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script type="text/javascript"> function save(){ alert("拦截a标签的href请求提交1"); <!--此处仅仅模拟表单提交前的验证过程

UI标签库专题三:JEECG智能开发平台 FormValidation(表单提交及验证标签)

?? 1. FormValidation(表单提交及验证标签) 1.1.  参数 属性名 类型 描述 是否必须 默认值 action string 表单提交路径 否 null formid string 表单唯一标示 是 formobj refresh boolean dialog为true时是否刷新父页面 否 true callback string 表单提交完成后的回调函数 否 null beforeSubmit string 表单提交前的处理函数 否 null btnsub string

UI标签库专题三 JEECG智能开发平台 FormValidation 表单提交及验证标签

1. FormValidation(表单提交及验证标签) 1.1.  参数 属性名 类型 描述 是否必须 默认值 action string 表单提交路径 否 null formid string 表单唯一标示 是 formobj refresh boolean dialog为true时是否刷新父页面 否 true callback string 表单提交完成后的回调函数 否 null beforeSubmit string 表单提交前的处理函数 否 null btnsub string 触发表

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

连续2天,在进行form表单包括上传表单的提交操作时,刚开始用struts2自带的上传模式与后台进行交互,但原来的页面是用html做的,不能通过国际化资源来返回后台操作的错误信息于静态的html,之后我又百度了许多ajax异步与后台交互的方法,如ajaxForm,ajaxSubmit,ajaxFileUpload等,用的是心力交瘁,各种错误抛出,然后还尝试easyui的表单提交,还是不成...这一切的目的都是为了实现异步交互,不让当前页面跳转,使用ajax实现文件上传的异步刷新,最后还是死心了,

使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址, 信息表内容通过表单输入,提交前先使用正则表达式进行验证,联系地址不能超过20个字符, 每输入一名学生的信息,提交后,表格增加一行,表格不能被选择、复制。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <!--        描述:使用文档对象在页面上创建学生信息表.        信息表包括学号.姓名.性别.电子邮件.联系电话.个人主页和联系地址,        信息表内容通过表单输入,提交前先使用