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 ...
随机推荐
- MIP技术进展月报第2期: 数据绑定，异步脚本加速
一. 功能更新 1. mip-bind 上线,实现复杂交互 MIP bind 双向绑定机制和组件上线,提供双向绑定的特性:能够允许页面实现数据驱动功能,开发者可以在任意场景修改数据,并驱动页面元素变动 ...
- python中字符串拆分与合并——split()、join()、strip()和replace()
Python3 split()方法 描述split()通过指定分隔符对字符串进行切片,如果参数num 有指定值,则仅分隔 num 个子字符串 语法split()方法语法: str.split(str= ...
- mvc、mvp和mvvm
一.MVC 设计图: 可能由于MVP.MVVM的兴起,MVC在android中的应用变得越来越少了,但MVC是基础,理解好MVC才能更好的理解MVP,MVVM.因为后两种都是基于MVC发展而来的. 1 ...
- DSAPI 生成桌面图标（带数字）
功能:在桌面上创建一个带有指定数字的图标. 效果图: 生成的ICO图标 代码 Private Sub 生成桌面图标(消息数量 As Integer) Try Dim B As New Bitmap(M ...
- Android拦截并获取WebView内部POST请求参数
起因: 有些时候自家APP中嵌入的H5页面并不是自家的.但是很多时候又想在H5不知情的情况下获取H5内部请求的参数,这应该怎么做到呢? 带着这个疑问,就有了这篇博客. 实现过程: 方案一: 最开始想到 ...
- 001-为什么Java能这么流行
本文首发于公众号:javaadu 典型回答 这种问题比较笼统,如果我遇到这个问题,我会从下面几个点阐述我的观点: Java通过JVM实现了"一次编写,到处运行"的特性,由JVM屏蔽 ...
- 章节八、3-如何用Chrome开发者工具查看元素
一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...
- 一条SQL生成数据字典
有个字典表并定期维护,对DBA和开发很重要,终于把他们整合在一起了,看有没问题? 一条SQL生成数据字典,包含所有OPEN用户.表名.字段名.字段序号.字段属性.默认值.是否非空.字段意思.主键标识. ...
- Postgres全文搜索功能
当构建一个Web应用时,经常被要求加上搜索功能.其实有时候我们也不知道我要搜索个啥,反正就是要有这个功能.搜索确实很重要的特性,这也是为什么像Elasticsearch和Solr这样基于Lucene的 ...
- Java集合框架详解（全）
一.Java集合框架概述 集合可以看作是一种容器,用来存储对象信息.所有集合类都位于java.util包下,但支持多线程的集合类位于java.util.concurrent包下. 数组与集合的区别如下 ...