专栏首页Ryan Miaojs基础-表单验证和提交

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属性后面接着添加onsubmit="return false;"属性.表示不提交。true则相反。这里可以用一个方法替换。变成:

<form action="/back/login/login" method="post" id="form1" onsubmit="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。对应到表单,就是onsubmit="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();      

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • OpenFeign封装为springboot starter

    随着业务的增多,我们的单体应用越来越复杂,单机已经难以满足性能的需求,这时候出现了分布式。分布式通讯除了RPC, REST HTTP请求是最简单的一种方式。Op...

    Ryan-Miao
  • springmvc4环境简单搭建和定时任务

    之前复制粘贴创建了几个ssm的项目,然而回头让自己写的时候还是一头雾水,究其原因是spring的陌生。仅仅是写过几个helloworld而已。而且是照着写。我都...

    Ryan-Miao
  • Java对象的序列化和反序列化源码阅读

    前言 序列化和反序列化看起来用的不多,但用起来就很关键,因为稍一不注意就会出现问题。序列化的应用场景在哪里?当然是数据存储和传输。比如缓存,需要将对象复刻到硬盘...

    Ryan-Miao
  • WriteUp分享 | LCTF的一道preg_match绕过+出题人的锅

    0x00题目 http://123.206.120.239/ idea/workspace.xml 泄露文件信息,常见于用phpstorm写项目然后同步到git...

    安恒网络空间安全讲武堂
  • 非插件实现WordPress中文用户名注册方法

    作为国人注册时最喜欢用的还是中文名字,但默认情况下使用wordpress注册时是无法使用中文的,那怎么解决呢?国人是万能的,其实这也是我从网上找到的。那就是修改...

    汐楓
  • 带你认识一下mysql中数据库information

    information_schema 大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个information_schema数据库。 inf...

    企鹅号小编
  • 数据库: Python连接数据库实现增 删 改 查 操作

      "insert into userinfo "+ " values(1,"+"'"+ "yang" +"'"+ "," +"'"+"11223344"+"'...

    杨奉武
  • sparksql比hivesql优化的点(窗口函数)

    有时候,一个 select 语句中包含多个窗口函数,它们的窗口定义(OVER 子句)可能相同、也可能不同。

    数据仓库践行者
  • 极客大挑战2019PHP题目详解

    网页中提到了备份网站,因此可以尝试使用一个网站备份文件名的字典来进行爆破,发现网站中有www.zip文件。

    KevinBruce
  • Microsoft SQL Server手注之报错注入

    今天主要分享下sql注入中的报错型,在大多网上的文章会列出类似于公式的句子,却没解释为什么要使用这样的函数,为什么使用这个函数会出现报错而导致sql注入。

    漏洞知识库

扫码关注云+社区

领取腾讯云代金券