JavaScript学习一之数据校验
JavaScript页面进行数据校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
数据校验,用来校验用户名的长度邮箱的合法性
-->
<script>
function checkForm(){
//获取用户输入的内容
var inputusername = document.getElementById("username");
var uValue = inputusername.value;
if(inputusername.value.length >= 6){
}else{
alert("对不起,用户名太短啦!")
return false;
}
//邮箱的校验
//获取用户输入的邮箱的值
var email = document.getElementById("email")
var uEmail = email.value;
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
alert("校验成功");
}else{
alert("校验失败")
return false;
}
return true;;
}
</script>
</head>
<body>
<form action="../01-网站首页的优化/网站首页.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" /><br />
密码:<input type="password" id="password" /><br />
邮箱:<input type="text" id="email" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
onSubmit和onclick的区别
这里数据校验用到了onsubmit，经过查找资料发现用法和onclick类似
onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。
在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。
但是onclick比onsubmit更早的被触发。
提交过程
1、用户点击按钮 —->
2、触发onclick事件 —->
3、onclick返回true或未处理onclick —->
4、触发onsubmit事件 —->
5、onsubmit未处理或返回true ——>
6、提交表单.
onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交
参考资料: https://blog.csdn.net/Dongguabai/article/details/79487166
JavaScript学习一之数据校验的更多相关文章
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- Struts2学习笔记(九)——数据校验
Struts2的数据校验属于服务器端校验,Struts2 支持校验方式 : 手动校验(代码校验) :在服务器端通过编写java代码,完成数据校验 自动校验(配置校验) :XML配置校验(主流) 和 注 ...
- Struts2学习---简单的数据校验、访问Web元素
1.简单的数据校验 在action里面我们已经给出了一个数据校验: public String execute() { if(user.getUsername().equals("usern ...
- Symfony2学习笔记之数据校验
校验在web应用程序中是一个常见的任务.数据输入到表单需要被校验.数据在被写入数据库之前或者传入一个webservice时也需要被校验. Symfony2 配备了一个Validator 组件,它让校验 ...
- Java学习笔记：数据校验
在后台开发过程中,需要对参数进行校验. validation bean 是基于JSR-303标准开发出来的,使用注解的方式实现,是一套规范,可以实现参数的校验. Hibernate Validator ...
- 一脸懵逼学习Struts数据校验以及数据回显，模型驱动，防止表单重复提交的应用。
1:Struts2表单数据校验: (1)前台校验,也称之为客户端校验,主要是通过Javascript编程的方式进行数据的验证. (2)后台校验,也称之为服务器校验,这里指的是使用Struts2通过xm ...
- Struts2基础学习(四)—类型转换器和数据校验
一.自定义类型转换器 1.概述 Struts2提供了常规类型转换器,可以用于常用数据类型的转换,但如果目标类型是一个特殊类型,则需要自定义转换器.Struts2 类型转换器实际上都是基于OG ...
- GO学习笔记 - 数据校验
本文主题:基于asaskevich/govalidator实现Golang数据校验 小慢哥的原创文章,欢迎转载 目录 ▪ 一. asaskevich/govalidator介绍 ▪ 二. 字符串匹配 ...
- struts2学习笔记--使用Validator校验数据
我们在进行一些操作是需要对用户的输入数据进行验证,比如网站的注册,需要对各个数据项进行数据校验,Struts2提供了一些默认的校验器,比如数字的检测,邮箱的检测,字符串长度的检测等等. 常用的Vali ...
随机推荐
- tcp套接字粘包解决办法
粘包只会出现在tcp,udp传输不会产生粘包现象.解决粘包的原理就是服务器预先向客户端发送客户端即将获取文件的大小. 第一版解决方案: 服务器: # Author : Kelvin # Date : ...
- ASP.NET Core 实战：使用 Docker 容器化部署 ASP.NET Core + MySQL + Nginx
一.前言 在之前的文章(ASP.NET Core 实战:Linux 小白的 .NET Core 部署之路)中,我介绍了如何在 Linux 环境中安装 .NET Core SDK / .NET Core ...
- Unable to start embedded container; nested exception is org.springframework.context.ApplicationContextException: Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFa
Springboot通过application启动报错 2019-01-25 14:02:33.810 ERROR [restartedMain] org.springframework.boot.S ...
- vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
- Android之友盟多渠道打包与数据统计
文章大纲 一.多渠道打包与数据统计介绍二.友盟实现多渠道打包实战三.友盟数据统计实战四.项目源码下载五.参考文章 一.多渠道打包与数据统计介绍 多渠道打包,相信很多同学都知道.在Android ...
- 使用拷贝的方式(adb push) 绕过Android系统和adb install直接安装APK
某些情况下定制的Android系统为了限制用户安装应用,例如电视盒子,车载中控等,通过修改代码屏蔽了正常安装应用的方式 本文探讨如何在 adb shell 具有读写data分区目录的权限前提下,通过a ...
- SQLite 的 EXISTS 与 NOT EXISTS
话不多说先来看看表结构: 显而易见 Pid 存放的 Person 的 id :下面重点(奇葩需求!!!!) 我需要向表一(Person)里插入几条数据(...)这时候不会对表二做任何操作. 需求:查询 ...
- 20170319 - pycurl 提示 libcurl link-time version is older than compile-time version
使用 conda update anaconda 升级后,运行程序得到如下提示: ImportError: pycurl: libcurl link-time version (7.45.0) is ...
- Linux新手随手笔记1.8
配置网卡服务 将网卡的配置文件,保存成模板,叫做会话. nmcli命令查看网卡信息.nmcli是一款基于命令行的网络配置工具 只有一个网卡信息,下面我们再添加一个. 公司:静态IP地址 家庭:DHCP ...
- requestAnimationFrame 知多少？
在Web应用中,实现动画效果的方法比较多,JavaScript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中 ...