提交表单数据或阻止表单数据的提交(用户输入的数据不合法)

最新推荐文章于 2021-03-03 14:56:09 发布

(^_^ )

最新推荐文章于 2021-03-03 14:56:09 发布

阅读量1.6k

点赞数 1

分类专栏： javaScript 文章标签：你的关注是我写博客的动力

本文链接：https://blog.csdn.net/qq_38263696/article/details/82980720

版权

javaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

提交表单数据

单击submit按钮按钮
表单元素使用From对象的submit()方法;
(记住form里面的表单元素有一个form属性，它指向它所在的form元素,
也就是说在在表单元素的onclick事件里用this.form.submit();
即可提交数据
)

阻止表单数据提交

1submit按钮onclick()事件处理函数返回false(阻止事件的默认行为);
2`Form对象的onsubmit()事件处理函数返回false;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>this is test</title>
</head>

<body>
  <form action="#" method="get">
  	 <p>
  	 	<lable for="number">账号:</lable>
        <input type="text" name="number" id="number">
  	 </p>
  	 <p>
  	 	<lable for="pwd">密码:</lable>
        <input type="pwd" name="pwd" id="pwd">
  	 </p>
        <p>
     	   <span>submit按钮 </span>
           <input type="submit" value="登入">    
           <br>
          <span>button按钮 </span> 
          <button type="button">登入</button>	
     </p>
   </form>
</body>
</html>
<script>
	//简单的处理用户输入的数据
         var checkUserInput={
            number:   function(){
            	var number = document.getElementById("number");
            	var  value=number.value //拿到用户输入的value,下面想怎么验证就怎么验证，
            	if(value ===""){
                      return [false,"账户"];
            	}
            	return [true,"账号"];
             } ,
             pwd:   function(){
            	 var pwd = document.getElementById("pwd");
            	var  value=pwd.value //拿到用户输入的value,下面想怎么验证就怎么验证，
            	if(value ===""){
                      return [false,"密码"];
            	}
            	return [true,"密码"];
            } 
           

         }    
         var btn = document.getElementsByTagName("button")[0];
         //验证成功,通过From对象的submit()提交,  
         //验证失败弹出警告框
         btn.onclick= function(){
         if(checkUserInput.number()[0] && checkUserInput.pwd()[0]){
         	this.form.submit();
         }else{
           alert(checkUserInput.number()[1] +"和"+checkUserInput.pwd()[1]+"不合法"+"\n你的IP地址已被记入，请老实点!");
         }
       };
      var form = document.getElementsByTagName("form")[0];
      //单击submit按钮，触发这个按钮的click事件(要求:这个事件没有被祖先元素阻止这个事件传播)
      //if  onclik事件处理函数返回false,浏览器会阻止onclick事件的默认行为，
      //   也就是不会触发From对象的submit事件;
      //else  触发Form对象的submit事件;
     //form.onsubmit()返回false,数据就不会提交
        
      form.onsubmit = function (){
         if(checkUserInput.number()[0] && checkUserInput.pwd()[0]){
         	 return "OK";
         }else{
             alert(checkUserInput.number()[1] +"和"+checkUserInput.pwd()[1]+"不合法"+"你的IP地址已被记入，请老实点!");
             return false;
         }
      }
</script>

(^_^ )

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
提交表单数据或阻止表单数据的提交(用户输入的数据不合法)

提交表单数据单击submit按钮按钮表单元素使用From对象的submit()方法;(记住form里面的表单元素有一个form属性，它指向它所在的form元素,也就是说在在表单元素的onclick事件里用this.form.submit();即可提交数据)阻止表单数据提交1submit按钮onclick()事件处理函数返回false(阻止事件的默认行为);2`Form对象的o...
复制链接

扫一扫