使用JS完成注册表单的数据校验
1、前台校验
防君子不防小人
JavaScript被设计用来向HTML页面添加交互行为
JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)
JavaScript由数行可执行计算机代码组成
JavaScript通常直接嵌入HTML页面
JavaScript是一种解释性语言(就是说,代码执行不进行预编译)
所有的人无需购买许可证均可使用JavaScript
Java和JavaScript的区别?
它们没有关系,就像雷锋和雷峰塔
JavaScript的作用
HTML是整个网站的骨架
CSS是对整个网站骨架的内容进行美化(修饰)
JavaScript能够让整个页面具有动态效果
JavaScript的组成部分:
1、ECMAScript核心
它是整个JavaScript的核心,包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)
2、DOM文档对象模型
它包含整个HTML页面的内容
3、BOM浏览器对象模型
它包含整个浏览器相关内容
Javascript语法
1、区分大小写
2、变量是弱类型的
3、每行结尾的分号可有可无
4、注释与Java、C和PHP语言的注释相同
5、括号表示代码块
JavaScript的变量
变量可以不用声明,变量是弱类型。统一使用var来定义!定义变量的时候不要使用关键字和保留字。
关键字
ECMAScript有5种原始类型,即Undefined、Null、Boolean、Number和String。
引用数据类型:存在很多种,每种都是object对象
可以使用typeof查看数据类型,使用instanceof判断变量数据类型
null和undefined的区分
null:对象不存在
undefined:对象存在,访问属性或者方法不存在(对象未初始化)
获取元素内容
获取元素
document.getElementById("id名称");
如果id是一个字符串,那么必须加上引号,如果是一个变量那么不需要
获取元素里面的值
document.getElementById("id名称").value;
JavaScript事件
表单提交事件:onsubmit
JavaScript的输出
警告框:alert();
向页面指定位置写入内容:innerHTML(属性);
向页面写入内容:document.write("");
3步骤分析
第一步:确定事件(onsubmit)并为其绑定一个函数
第二步:书写这个函数(获取用户输入的数据)<获取数据时需要在指定位置定义一个id>
第三步:对用户输入的数据进行判断
第四步:数据合法(让表单提交)
第五步:数据非法(不让表单提交)给出错误提示信息
如何控制表单提交?
关于事件onsubmit:一般用于表单提交的位置,那么需要定义函数的时候给出一个返回值。onsubmit = return checkForm();
代码的实现
2、后台校验
使用JS完成注册表单的数据校验的更多相关文章
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- JS判定注册表单的几个方式 及 Ajax进行用户名存在判定
最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...
- 模拟js中注册表单验证
示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Laravel Form 表单的数据校验
例如,要使用手机号加验证码的方式提供登录网站的功能,那么在处理前端提交的 form 表单时,就不得不对提交的手机号及验证码做基本的数据校验. 手写规则,非常浪费时间.使用 laravel 内置的 va ...
- js获取form表单所有数据
代码如下: <script type="text/javascript"> // 获取指定form中的所有的<input><select>对象 ...
- 第一百六十节,封装库--JavaScript,ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- ajax 提交 注册表单 到MySQL数据库
今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...
- 如何利用WordPress创建自定义注册表单插件
来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...
- UX设计秘诀之注册表单设计,细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
随机推荐
- 缩点 CF893C Rumor
CF893C Rumor 有n个人,其中有m对朋友,现在你有一个秘密你想告诉所有人,第i个人愿意出价a[i]买你的秘密,获得秘密的人会免费告诉它的所有朋友(他朋友的朋友也会免费知道),现在他们想出最少 ...
- webpack构建多页面react项目(webpack+typescript+react)
目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...
- JQ的ready()方法与window.onload()的区别与联系
JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系: $(document).ready() windo ...
- JavaWeb学习笔记(十七)—— 数据库连接池
一.数据库连接池概述 1.1 为什么使用数据库连接池 如果用户每次请求都向数据库获得连接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建1 ...
- php尝试调用一个图灵机器人
1.需要到图灵机器人的网址,去注册一下账号.网址:http://www.tuling123.com/sso-web/index.html?ReturnURL=http%3A%2F%2Fwww.tuli ...
- 手写JDBC - 数据库、驱动信息存储在配置文件
1. 将数据库.驱动信息存储在配置文件 configure.properties url=jdbc:mysql://localhost:3306/数据库名?serverTimezone=GMT& ...
- vue笔记精华部分
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性.API 方法冲突.你可以使用例如 vm.$data._property 的方式访问这些属性. mixin的使 ...
- 在W3C SCHOOL网站上发现一个关于Schema的错误
原地址是http://www.w3school.com.cn/schema/schema_complex_empty.asp 下面这个例子是不正确的 xmlspy报错. 因为<xs:restri ...
- 【ExtJS】一个简单的TreePanel
在ExtJS中,构造一个树形结构变得很简单. 需要用到的: Ext.tree.Panel TreePanel提供树形结构的UI表示的树状结构数据. 一个TreePanel必须绑定一个Ext.data. ...
- MySQL 主重复 时时
MySQL .7开启Enhanced Multi-Threaded Slave配置: #slave slave-parallel-type=LOGICAL_CLOCK slave master_inf ...