js基础-表单验证和提交
时间:2022-05-04
本文章向大家介绍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();
- Python Tips, Tricks, and Hacks
- 英特尔放出Linux微代码以修复Meltdown和Spectre漏洞
- python基础(5):深入理解 python 中的赋值、引用、拷贝、作用域
- Linux SSH密码暴力破解技术及攻防实战
- 西部数据NAS设备被曝存在硬编码后门和未授权文件上传高危漏洞
- Hive & Performance 学习笔记
- 任意用户密码重置(一):重置凭证泄漏
- linux 系统监控、诊断工具之 top 详解
- 一个二进制POC的诞生之旅CVE-2018-0802
- 远程RPC溢出EXP编写实战之MS06-040
- 浮点数加法引发的问题:浮点数的二进制表示
- 新手科普 | MySQL手工注入之基本注入流程
- linux 系统监控、诊断工具之 lsof 用法简介
- 关于 SimpleDateFormat 的非线程安全问题及其解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux下如何查杀stopped进程详解
- Linux文件服务器实战详解(匿名用户)
- ubuntu16.0.4 设置固定ip地址的方法
- Linux文件服务器实战详解(虚拟用户)
- Linux CentOS下安装Tomcat9及web项目的部署
- Linux文件服务器实战详解(系统用户)
- 关于bash函数你可能不知道的一些事情(译)
- Linux Centos7系统端口占用问题的解决方法
- Linux中利用sudo进行赋权的方法详解
- Centos7下用户登录失败N次后锁定用户禁止登陆的方法
- Linux服务器被黑以后的详细处理步骤
- linux下用户程序同内核通信详解(netlink机制)
- yum安装本地rpm软件方案详解
- CentOS 部署 flask项目的方法
- 在linux服务器下使用版本控制软件SVN的方法