使用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服务,并非 ...
随机推荐
- flask_restful(转载)
flask插件系列之flask_restful设计API 前言 flask框架默认的路由和视图函数映射规则是通过在视图函数上直接添加路由装饰器来实现的,这使得路由和视图函数的对应关系变得清晰,但对于统 ...
- Rstudio常用快捷键 “原版+中文” 整理
- 2018牛客多校6 - I Team Rocket KD树维护空间
题意:给出n条铁路区间\([L,R]\),共有m个boom依时间顺序放置在\(k_i\)中,区间与\(k_i\)有交集的都被炸掉 求每次炸掉的铁路个数和最后输出所有id被炸的时间点 炸弹能炸到的区间满 ...
- 配置idea解决乱码
在项目开发过程中,我们一般希望在修改完代码之后不重启项目即可提现出修改的结果,那么热部署项目就显得十分必要了.在idea中将项目热部署至tomcat中的方法如下: 首先打开tomcat配置界面,在se ...
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- Zookeeper概念学习系列之zab协议
不多说,直接上干货! 上一章讨论了paxos算法,把paxos推到一个很高的位置. Zookeeper概念学习系列之paxos协议 但是,paxos有没有什么问题呢?实际上,paxos还是有其自身的缺 ...
- 理解C#反射
参考文章:http://blog.csdn.net/educast/article/details/2894892 上面的文章将C#反射要用到的方法都给出了,下面我将写个例子,帮助理解 [1.使用反射 ...
- Call to a member function assign() on null
Thinkphp: 在子控制器里面写了一个构造函数,如下 //构造函数 public function __construct(){ echo 1; } 结果页面报错了 ----> Call ...
- Mybatis基本介绍
Mybatis介绍 1.Mybatis介绍 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了goog ...
- Android新手常见问题(一)
[1]AAPT2 error: check logs for details File->Settings->Build->Gradle一看path里有中文 最根本的原因是因为use ...