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 双向绑定机制和组件上线,提供双向绑定的特性:能够允许页面实现数据驱动功能,开发者可以在任意场景修改数据,并驱动页面元素变动 ...
- JAVA基础第三章-类与对象、抽象类、接口
业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...
- 让你分分钟理解 JavaScript 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是 ECMAScript 规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概 ...
- 【STM32H7教程】第11章 STM32H7移植SEGGER的硬件异常分析
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第11章 STM32H7移植SEGGER的硬 ...
- AWVS12 介绍和安装详解 -- For Windows10
一.AWVS介绍: Acunetix Web Vulnerability Scanner,简称:AWVS,是一个自动化的Web安全测试工具,它可以扫描Web站点和Web应用. AWVS可以快速扫描SQ ...
- 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API
前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...
- python接口自动化（十六）--参数关联接口后传（详解）
简介 大家对前边的自动化新建任务之后,接着对这个新建任务操作了解之后,希望带小伙伴进一步巩固胜利的果实,夯实基础.因此再在沙场实例演练一下博客园的相关接口.我们用自动化发随笔之后,要想接着对这篇随笔操 ...
- 工厂方法模式--java代码实现
工厂方法模式 工厂方法模式,对简单工厂模式进行了升级.我们将水果园比作一个工厂,在简单工厂模式下,水果园是一个具体的工厂,直接用来生产各种各样的水果.那么在工厂方法模式下,水果园是一个抽象工厂,那么苹 ...
- 理解ASP.NET Core 依赖注入
目录: 一.什么是依赖注入 1.1.什么是依赖? 1.2. 什么是注入? 1.3.依赖注入解决的问题 二.服务的生命周期(.Net Core DI) 三.替换默认服务容器 3.1.为什么替换默认服务容 ...
- 微信小程序 组件通信相关知识整理
1.自定义组件间通信与事件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.htm ...