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 ...
随机推荐
- Python创建微信机器人
微信,一个日活10亿的超级app,不仅在国内社交独领风骚,在国外社交也同样占有一席之地,今天我们要将便是如何用Python来生成一个微信机器人,突然想起鲁迅先生曾经说过的一句话:因为是微信机器人系列的 ...
- Java：并发不易，先学会用
我从事Java编程已经11年了,绝对是个老兵:但对于Java并发编程,我只能算是个新兵蛋子.我说这话估计要遭到某些高手的冷嘲热讽,但我并不感到害怕. 因为我知道,每年都会有很多很多的新人要加入Java ...
- 百度病了，必应挂了，Yandex疯了。
前天一篇<搜索引擎百度已死>的文章火遍了互联网圈.文中作者指出如今的百度搜索首页一大半都是百度自家的产品,比如你搜索特普朗,你会发现第一页的结果分别是:百度百科.贴吧.百家号.百家号.百家 ...
- HTML 练习滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- <pre>标签：\r\n换行符的保留
mysql数据读库的\r\n换行符处理 这个问题是我在采集数据时发现的,采集网页的数据,大概有6千多条,采集的内容保留了最原始的\r\n和\n换行字符,但在mysql管理工具中(phpmyadmin和 ...
- Socket深度探索 4 PHP（转）
[连载] Socket 深度探索 4 PHP (一) [连载] Socket 深度探究 4 PHP (二) [连载] Socket 深度探究 4 PHP (三)
- Sql Server 复制数据库
确实很实用 https://www.cnblogs.com/ggll611928/p/7451558.html
- 【English Teradata】Strategizing Vantage Technology
strategy部署;谋略;战略[ˈstrætədʒi] strategize制定战略 Strategizing战略化 Technology科技;工艺;工程技术 [tekˈnɑːlədʒi] St ...
- Android 平台 Native 代码的崩溃捕获机制及实现
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/g-WzYF3wWAljok1XjPoo7w 一.背景 ...
- Kafka 消费者相关配置
消费者相关配置类为 org.apache.kafka.clients.consumer.ConsumerConfig 具有以下配置参数 1. GROUP_ID_CONFIG = "grou ...