当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 【转载】 form表单提交，前端验证

【转载】 form表单提交，前端验证

2020年07月17日  | 移动技术网IT编程  | 我要评论

转自：https://blog.csdn.net/n1143916111/article/details/71024864/

Form表单提交，js验证

1,  Onclick()

2, Onsubmit()

Button标签 input (属性 submit  button )标签

Input type=button   定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本

Input type=submit 定义提交按钮，提交按钮会把表单数据发送到服务器

在javascript中，事件调用函数时，用return返回值实际上是对window.event.returnValue进行设置

而该值决定当前操作是否继续，true是继续 false中断

第一种方法：onsubmit 与 Input type=submit 搭配  

上述两种方法的  Input type=submit 等同于 button标签

第二种方法：onclick 与 Input type=button 搭配  

注意：Input type=button 提交不会触发form的 onsubmit事件

 

目录

原始提交如下：
　　方法1：
方法2：js控制提交表单

基础知识：

原始提交如下：

 

1 <form action="/login" method="post" id="form1">
2      <span>用户</span>
3     <input type="text" name="username" id="username"/><br/>  
4     <span>密码</span>
5     <input type="password" name="password" id="passsword"/><br/>  
6     　　
7      <input type="submit" value="提交">    
9 </form>

 

说明：

  • form是一个表单，用来发送http请求。直观的说，只要用form将需要提交到服务器的标签包围，当提交的时候，就会向服务器发送有name属性的数据。所以，input内容提交必须有name属性。
    • action：服务器接口路径；
    • method:选择发送请求的方式，默认是get，通常用post。get请求会在地址栏显示参数，并且有长度限制。post则没有。
    • id:标识标签元素
    • 当提交后，服务器就会得到：username=填的用户名 & password=填的密码
  • 当点击提交后，form数据就会发送。通常提交前要校验数据。比如长度规则等。所以需要js。　　　　

js校验：

　　方法1：

　　　　　　在from属性后面接着添加οnsubmit="return false;"属性.表示不提交。true则相反。这里可以用一个方法替换。变成：

<form action="/back/login/login" method="post" id="form1" οnsubmit="return sb1();">

　　　　　　然后，书写js验证规则：

 

 1 function sb1(){
 2         var username = document.getElementById("username");
 3         var password = document.getElementById("passsword");
 4         if(trim(username.value)==null || trim(username.value)==""){
 5             alert("请输入用户名");
 6             username.focus();
 7             return false;
 8         }
 9         if(trim(password.value)==null || trim(password.value)==""){
10             alert("请输入密码");
11             password.focus();
12             return false;
13         }
14         
15         return true;
16     }
17     function trim(str){ //删除左右两端的空格
18     　　     return str.replace(/(^\s*)|(\s*$)/g, "");
19     }

 

　　js含义：

  • var username = document.getElementById("username");
  • 表示获得id为username的标签对象，可以理解为输入用户名的那个输入框
  • username.value表示输入框的内容
  • trim是一个方法，去除字符串左右两端空格。
  • 方法是一个串代码的执行体，调用方法会执行方法中的内容。方法又叫做函数，方法由方法名，括号中的参数，大括号中的方法体组成。在js中，方法参数不用声明类型，调用方法的时候，参数按照顺序匹配。比如，trim(username)，username就是str，所以，方法中的参数str就是形式参数，简称形参，而username叫做实体参数，简称实参。当调用trim(username)的时候，username就替换了str。
  • 判断值为null或者""空字符串用==
  • alert表示弹出对话框，内容是字符串，所以需要用引号括起来。
  • username.focus()表示焦点聚集在username这个对象，也就是输入框。
  • return false；return表示函数执行结束，后面的代码不执行。return false表示该函数返回一个boolean值为false。对应到表单，就是οnsubmit="false"，表示不提交。
  • 如果if条件都满足，则return true；提交。
  • ||表示或者，意思是，如果username==null或者username是空字符串，条件1或者条件2为true则都是true

方法2：js控制提交表单

首先，表单元素代码如下：

 

 1 <form action="/back/login/login" method="post" id="form1">
 2     <span>用户</span>
 3     <input type="text" name="username" id="username"/><br/>  
 5     <span>密码</span>
 6     <input type="password" name="password" id="passsword"/><br/>  
 8  　　
 9     <a href="javascript:sb();">提交</a>     
10 </form>

 

这里关于提交，页面切图通常都会用a标签或者button来提交，因为涉及到表单验证。

同样，js：

 

 1 function sb(){
 2         var username = document.getElementById("username");
 3         var password = document.getElementById("passsword");
 4         if(trim(username.value)==null || trim(username.value)==""){
 5             alert("请输入用户名");
 6             username.focus();
 7             return;
 8         }
 9         if(trim(password.value)==null || trim(password.value)==""){
10             alert("请输入密码");
11             password.focus();
12             return;
13         }
14         
15         form1.submit();
16         
17     }

 

　　js含义：

  • 这个sb()方法没有返回值，return就是直接结束，如果没有return就一直执行完所有代码。也就是说，验证通过就会提交。
  • 这里说明一下提交的方法，可以用form的id或者name属性表示form这个对象，然后调用submit()方法即可。
  • 当然，推荐用document.getElementById("form1").submit();　　

 

本文地址：https://blog.csdn.net/beidaol/article/details/85984798

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网