精华内容
下载资源
问答
  • JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name=loginForm action=login.aspx method=post> <button type=submit value=Submit id=submit>...
  • 工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功..."提交表单?")) { alert(obj.value); return true; } else { aler
  • 大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的 <form action="test.php" method="post"> </form> 这个缺点是会刷新页面,会跳转页面的。 今天给大家带来的技术就是ajax提交表单 优点...
  • 原生js表单美化制作注册个人信息提交表单代码
  • 二、提交表单的两种方式 (1)通过向form标签中添加onsubmint事件实现表单提交 (2)通过向标签中添加onclick事件触发js函数以提交表单 一、JavaScript表单校验 表单校验,时HTML网页中常常会用到的一个功能,...

    目录

     

    一、JavaScript表单校验

    二、提交表单的两种方式

    (1)通过向form标签中添加onsubmint事件实现表单提交

    (2)通过向标签中添加onclick事件触发js函数以提交表单


    一、JavaScript表单校验

    表单校验,时HTML网页中常常会用到的一个功能,例如,在HTML页面中实现登录功能,登录成功后跳转,这就需要用到表单校验,再或者,在HTML网页中插入一个调查表,但调查表中某些内容不能为空,需要填写内容方可提交。

    二、提交表单的两种方式

    (1)通过向form标签中添加onsubmint事件实现表单提交

    代码示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script>
    			function check(){
    				var inputElement = document.getElementById("user_name");
    				if(inputElement.value==""){
    					alert("请输入用户名");//当用户名为空时,弹出警告
    					return false;//将onsubmint值置为false,即用户名为空时无法提交
    				}
    				inputElement = document.getElementById("password");
    				if(inputElement.value==""){
    					alert("请输入密码");//当密码为空时,弹出警告
    					return false;//将onsubmint值置为false,即密码为空时无法提交
    				}
    				return true;
    			}
    		</script>
            <!--若表单提交成功,则跳转到百度界面-->
    		<form action="http://www.baidu.com" onsubmit="return check()"><!--添加一个form表单,且当onsubmit为true时,才可以提交-->
    			<input id="user_name" placeholder="请输入用户名" />
    			<input id="password" type="password" placeholder="请输入密码" />
    			<input type="submit" value="登录" /><!--插入提交按钮-->
    			<input type="reset" value="重置"/><!--点击重置按钮可将文本框内容清空-->
    		</form>
    	</body>
    </html>
    

    页面效果如下:

     用户名为空时,点击提交:

     密码为空时,点击提交:

    提交成功,则跳转到百度界面。

    (2)通过向标签中添加onclick事件触发js函数以提交表单

    代码示例:

    html代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<style>
    			i{
    				font-style: normal;
    				cursor: pointer;
    				color: gainsboro;
    				background-color: brown;
    				border: 1px,solid,rosybrown ;
    				display: inline-block;
    				height: 30px;
    				width: 60px;
    				text-align: center;
    				line-height: 30px;
    			}
    		</style>
    		<form id="login" action="http://www.baidu.com">
    			<input id="user_name" placeholder="请输入用户名" />
    			<input id="password" type="password" placeholder="请输入密码" />
    			<input type="radio" name="sex" />男<input type="radio" name="sex" />女<!--单选框-->
    			
                <select id="grade"><!--下拉列表-->
    				<option id="0">--请选择--</option>
    				<option id="1">一年级</option>
    				<option id="2">二年级</option>
    			</select>
    			<i id="botton" onclick="check()">登录</i>
    			<i id="reset">重置</i>
    		</form>
    		
    		<script>
    			document.getElementById("reset").addEventListener("click",function(){
    				document.getElementById("login").reset();
    			});
    		</script>
    	</body>
    </html>
    

    js代码:

    function check(){
        var inputElement = document.getElementById("user_name");
    	if(inputElement.value==""){
    		alert("请输入用户名");
    		return;
    	}
    	inputElement = document.getElementById("password");
    	if(inputElement.value==""){
    		alert("请输入密码");
    		return;
    	}
    				
    	var inputElements = document.getElementsByName("sex");
    	var flag = 0;
    	for(var i = 0;i<inputElements.length;i++){
    		if(inputElements[i].checked){
    			flag = 1;
    			break;
    		}
    		if(flag == 0){
    			alert("请选择性别");
    			return;
    		}					
    	}
    				
    	var options = document.getElementById("grade").options;
    	for(i = 0;i<options.length;i++){
    		if(options[i].selected&&options[i].id==0){
    			alert("请选择年级");
    			return;
    		}
    	}
    				
    	document.getElementById("login").submit();//经过一系列空判别时,通过submit()方法提交
    }
    
    document.getElementById("reset").addEventListener("click",
        function(){
    	    document.getElementById("login").reset();
        }
    );

     效果同上述,不再赘述。

     

    展开全文
  • <body> <... <p>name:<input type="text" name="user" id="user">... 第一种方法:利用event的阻止默认事件机制,页面载入之后获得submit元素,然后为submit注册click响应函数,参数为event事件。 在用户
  • 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值。 onsubmit = return checkForm() 2、完成注册...
  • javascript实现表单提交加密

    千次阅读 2019-01-15 11:03:37
    通常表单提交有两种方式,一是直接通过html的form提交,代码如下: &lt;form action="" method="" id="forms"&gt; &lt;input type="text" name="...

    通常表单的提交有两种方式,一是直接通过html的form提交,代码如下:

    <form action="" method="" id="forms">
        <input type="text" name="username" value="" />
        <input type="password" name="pwd" value="" />
        <input type="submit" value="提交"/>
    </form>
    

    但有时候我们会出于安全角度考虑,给用户输入的密码进行加密,方法一就没办法解决这个问题,这时候我们同常会选择另一种方法,使用javaScript来进行表单提交,代码入下:

    <!--HTML-->
    <form action="" method="" id="test_form">
        <input type="text" name="username" value="" />
        <input type="password" name="pwd" value="" />
        <button type="button" onclick='doSubmitForm()'>提交<button/>
    </form>
    
    
    <script>
    var form = document.getElementById('test_form');
    //这里再次修改input内容
    
    form.submit();
    </script>
    

    这种方法有个缺点就是,打乱正常的表单提交程序,通常用户输入完成后点击回车键就可以提交,但是这个方法实现不了,所以,使用下面的方法便可以解决这个问题,,通过form自身的onsubmit方法,来触发提交,然后进行input的修改:

    <!--HTML-->
    <form id='test_form' action='' method='' omsubmit='return checkForm()'>
        <input type='text' name='username' value=''/>
        <input type='password' name='pwd' value =''/>
        <button type='submit'>提交<button/>
    <form/>
    
    <script>
    function checkForm(){
        var form = document.getElementById('test_form');
        //可在此修改input            
        //进行下一步
        return ture;
    }
    <script/>
    

    注意,checkForm()方法中,return true时,表单才会正常提交,为false时,浏览器将不会提交,通常是用户的密码输入错误时,终止提交。

    之前说过,为安全考虑用户提交时,一般对密码进行加密处理,代码如下:

    <!--HTML-->
    <form id='test_form' action='' method='' onsubmit='return checkForm()'>
        <input type='text' name='username' value=''/>
        <input type='password' name='pwd' id='pwd' value =''/>
        <button type='submit'>提交<button/>
    <form/>
    
    <script>
    function checkForm(){
        var pwd= document.getElementById('pwd');
       pwd.value= toMD5(pwd.value);            
        //进行下一步
        return ture;
    }
    <script/>
    

    这种做法看上去没问题,但是当用户输入完成后,提交会发现密码框的 * 会由几个瞬间变成 32个,这是由于MD5加密造成的(MD5有32个字符);如果想避免出现这种情况,需要充分利用到,代码如下:

    <!--HTML-->
    <form id='test_form' action='' method='' onsubmit='return checkForm()'>
        <input type='text' name='username' value=''/>
        <input type='password'  id='input_pwd' value =''/>
        <input type='hidden' name='pwd' id='md5_pwd' value=''/>
        <button type='submit'>提交<button/>
    <form/>
    
    <script>
    function checkForm(){
        var input_pwd= document.getElementById('input_pwd');
        var md5_pwd= document.getElementById('md5_pwd');
         md5_pwd.value= toMD5(input_pwd.value);            
        //进行下一步
        return ture;
    }
    <script/>
    

    注意:<input type=‘password’/>是用户输入密码的input框,并没有设置 name 属性,而是给<input type=‘hidden’ />设置了 name=‘pwd’,这样表单提交只会提交带有name属性的输入框,从而解决了上面的那个问题。

    原文转自:https://www.cnblogs.com/web-wjg/p/7894657.html

    展开全文
  • 利用JavaScript操作表单的小例子

    千次阅读 2016-08-21 20:39:38
    t检查用户注册信息是否正确,在以下情况不满足时报错并阻止提交表单:用户名必须是3-10位英文字母或数字;口令必须是6-20位;两次输入口令必须一致。()"> <p id="test-error" style="color:

    t检查用户注册信息是否正确,在以下情况不满足时报错并阻止提交表单:

    用户名必须是3-10位英文字母或数字;

    口令必须是6-20位;

    两次输入口令必须一致。

    <form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
        <p id="test-error" style="color:red"></p>
        <p>
            用户名: <input type="text" id="username" name="username">
        </p>
        <p>
            口令: <input type="password" id="password" name="password">
        </p>
        <p>
            重复口令: <input type="password" id="password-2">
        </p>
        <p>
            <button type="submit">提交</button> <button type="reset">重置</button>
        </p>
    </form>
    'use strict';
    var checkRegisterForm = function () {
    var username = document.getElementById('username');
        var password = document.getElementById('password'); 
        var password2 = document.getElementById('password-2');
        var re_username = /^\w{3,10}$/;
        var re_passwd = /.{6,20}/;
        if (!re_username.test(username.value)) {
            alert("用户名长度须为3-10位字母或数字");
            return false; 
        }
        if (!re_passwd.test(password.value)) {
            alert("口令必须是6-20位");
            return false;
        }
        if (password.value != password2.value) {
            alert("两次输入口令不一致");
            return false;
        }
        return true;
    }
    
    // 测试:
    ;(function () {
        window.testFormHandler = checkRegisterForm;
        var form = document.getElementById('test-register');
        if (form.dispatchEvent) {
            var event = new Event('submit', {
                bubbles: true,
                cancelable: true
              });
            form.dispatchEvent(event);
        } else {
            form.fireEvent('onsubmit');
        }
    })();
    展开全文
  • 刚才写一个小偷程序,突然发现一旦POST中文时抓取不到内容,考虑到中文编码问题,像javascript中的escape()一样,在vbscript中也可以使用这个函数,只需要这个发送就可以正常抓取到内容了send(“A=”&escape(A)&””...
  • Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱  JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单提交前要...
  • 利用js提交form表单的方式

    万次阅读 2018-06-27 11:48:31
    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功&lt;script type="text/javascript"...提交表单?")) { alert(obj.value); return true; } els...


    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功

    <script type= "text/javascript" >
        function validate(obj) {
         if (confirm( "提交表单?" )) {
           alert(obj.value);
           return true ;
         } else {
           alert(obj.value);
           return false ;
         }
        }
      </script>
      <body>
       <form action= "//www.jb51.net" onsubmit= "return validate(document.getElementByIdx_x('myText'));" >    
         <input type= "text" id= "myText" />
         <input type= "submit" value= "submit" />    
       </form>
    </body>

    第二种方式:通过button按钮来触发表单提交事件οnclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证。

    <script type= "text/javascript" >
        function validate() {
         if (confirm( "提交表单?" )) {
           return true ;
         } else {
           return false ;
         }
        }     
        function submitForm() {
         if (validate()) {
           document.getElementByIdx_x( "myForm" ).submit();
         }
        }
      </script>
      <body>
       <form action= "//www.jb51.net" id= "myForm" >    
         <input type= "text" />
         <input type= "button" value= "submitBtn" onclick= "submitForm();" />
     <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->    
       </form>
    </body>

    第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交

    <script type= "text/javascript" >
        function validate() {
         if (confirm( "提交表单?" )) {
           return true ;
         } else {
           return false ;
         }
        }
      </script>
      <body>
       <form action= "//www.jb51.net" >    
         <input type= "text" />
         <input type= "submit" value= "submit" onsubmit= "return validate()" />    
       </form>
    </body>

    第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样nclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证

    <script type= "text/javascript" >
        function validate() {
         if (confirm( "提交表单?" )) {
           return true ;
         } else {
           return false ;
         }
        }
      </script>
      <body>
       <form action= "//www.jb51.net" >    
         <input type= "text" />
         <input type= "submit" value= "submit" onclick= "return validate()" />    
       </form>
    </body>

    ==================================================================

    小结:

    提交表单最简单的凡是是在html语句中直接提交,但是在需要验证,修改提交内容的情况下,提交表单就只能通过js对数据处理后进行提交。

    我们可以通过onsubmit事件,onclick事件将表单内容发送到js进行处理。

    最正规的方式是:在js中通过a标签和class标签,id标签对form内容进行处理后提交

    <form action="/anon/newPerfectInfo"  id="investorsOpen_form" method="post">
    <a href="javascript:;" class="fn-g-btn"><button type="submit">注册</button></a>

    展开全文
  • dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息。 var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单...
  • 提交</button> 重置 //js部分 function checkRegisterForm(){ var usrname = document.getElementById('username'); var gz = /^[_0-9a-zA-Z]{3,10}$/; var pwd1 = document.getElementById('password'); var pwd2...
  • 情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.article...
  • 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作,自动提交表单,轻松且高效。 步骤 1. 找到页面中...
  • ssm利用ajax提交from表单

    千次阅读 2019-05-10 19:32:13
    这是实现的是利用ajax提交表单。 1、准备工作 引入jquery、josn相关的jar包,配置springmvc(在这里你大概知道要做这些工作,接下来会一一的实现) 我将用到的jquery和josn的jar包放在网盘,有需要的根据链...
  • 该演示需要用到 1 : json.jar(下载)  2 : jquery.js(下载) 流程演示:1.点击“登录”按钮,传参到后台  2.后台获取数据,处理分析数据,利用JSONObject返回结果(JSONObject需要用到一个 json.jar 即可)
  • 利用iframe对form表单(含文件上传)进行跨任何域提交,无刷新且可以返回值
  • HTML开发与应用:用Javascript实现提交功能(表单验证)。 之前我们已经实现过表单的input输入功能,但是并没有实现其中按钮的“提交”功能,而在HTML中想要实现这类功能就要使用到Javascript,而表单的验证也是JS中...
  • 使用原生javascript实现ajax提交form表单============================1准备表单  首先我们需要编写一个html代码,这里我是采用nodejs里面的jade模板引擎来进行生成html代码的。form(action=&amp;quot;/ajax...
  • 在平常的页面当中,我们经常用到表单表单验证,表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者,在这里贴下我的菜鸟代码。
  • <script type="text/javascript"> function deleteuser(uid) { form1.userid.value = uid; form1.oper.value = "delete"; form1.submit; } function modifyuser(uid) { form1.userid.value = uid; ...
  • js全程:JavaScript(一门客户端脚本语言) a.js可以直接嵌入在html页面中,由浏览器解释执行,不进行预编译 b.用于向页面添加动态交互行为 c.具有与java语言类似的语法,一种网页编程语言 操作方向: —操作DOM元素...
  • javascript表单账户密码校验提交

    千次阅读 2018-09-14 17:50:26
    表单提交: from 表单 action 目标页面的url 当提交成功时,跳转的目标页面 method get post 网络提交方式 例如:get sucess.html?username='lili'&pwd='1231' post sucess.html ...
  • 一是编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单提交。 二是利用了浏览器的默认行为(至少发现ie是这样的)。浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和...
  • 以下是提交表单的表单验证要求: 用户名输入字段不能为空,并且必须包含两个以上且少于二十个字符 密码字段不能为空,并且必须包含五个以上且少于二十个字符 确认密码字段不能为空 密码和确认密码字段应匹配 提交...
  • 黑客或恶意用户使用postman等工具重复恶意提交表单(攻击网站)。 这些情况都会导致表单重复提交,造成数据重复,增加服务器负载,严重甚至会造成服务器宕机。因此有效防止表单重复提交有一定的必要性。 解决方案 ...
  • 随着 Ajax 的出现,表单序列化已经成为一种常见需求。在 JavaScript 中,可 以利用表单字段的 type 属性,连同 name 和 value 属性...6. 在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,不发送提交按钮。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,218
精华内容 18,887
关键字:

利用javascript提交表单

java 订阅