使用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服务,并非 ...
随机推荐
- andorid avd 下 使用 fiddler 抓包
Fiddler 设置:
- 数据库表的约束constraints
数据库表的约束constraints 数据完整性约束 表的数据有一定的取值范围和联系,多表之间的数据有时也有一定的参照关系. 在创建表和修改表时,可通过定义约束条件来保证数据的完整性和一致性. 约束条 ...
- Angular material mat-icon 资源参考_Action
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- Tr A(矩阵快速幂)
A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. Input 数据的第一行是一个T,表示有T组数据. 每组数据的第一行有n(2 <= n < ...
- Linux shell 中提取zip或jar文件中的某个文件
Linux shell 中提取zip或jar文件中的某个文件 假如有个压缩包 abc.jar, 里面文件如下 (可以用unzip -l abc.jar 查看): data/1.txt data/2.t ...
- npm run build报错 ,resolve is not defined
今天在build项目的时候报: ReferenceError: resolve is not defined npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ...
- c++ 网络编程(七) LINUX下 socket编程 基于套接字的标准I/O函数使用 与 fopen,feof,fgets,fputs函数用法
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9614820.html 一.标准I/O 1,什么是标准I/O?其实是指C语言里的文件操作函数,如 ...
- Visual Studio 2013复制项目
在当前解决方案下复制项目的步骤: 1. 在硬盘存放代码的目录下将整个文件拷贝一份,修改文件夹名字,改成新的项目名称, 然后修改 *.csproj文件,名字必须与新项目名一致. 2. 在解决方案上右键 ...
- jquery清空下拉框,保留第一个
js中可以document.getElementById("id").options.length = 1;设置 jquery中的设置方法:$("#id option[i ...
- MySql下载
一般企业办的mysql下载不到 1.准备 注册一个orcle账号 2.跳转到http://www.mysql.com/ ,然后点击Downloads导航栏 滚动到最下面并点击[Community(GP ...