zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    学习python -- 第018天 os模块
    学习python -- 第017天 文件读写
    重看算法 -- 动态规划 最大子段和问题
    重看算法 -- 递归与分治
    学习python -- 第016天 模块
    学习python -- 第016天 浅拷贝和深拷贝
    网络字节序、主机字节序(摘抄)
    C++/C常量
    结构化程序设计
    循环(高质量4.10)
  • 原文地址:https://www.cnblogs.com/jeremylee/p/5719395.html
Copyright © 2011-2022 走看看