JavaScript实现表单注册、表单验证、运算符功能


Posted in Javascript onOctober 15, 2018

JavaScript 是世界上最流行的脚本语言。

JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。

JavaScript 被设计为向 HTML 页面增加交互性。

许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。

特点:轻量级、通用、可插入html设计、易学

JS-注册表单检测雏形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-注册表单</title>
 <script>
  // 在页面加载时,执行指定函数
  window.onload = function () {
   // document.getElementById() 获取用户输入的用户名的标签对象;
   var uEle = document.getElementById('username');
   // 弹出警示框
   alert(uEle);
   // 获取对象里面的值
   var uValue = uEle.value;
   alert(uValue)
 
  }
 </script>
</head>
<body>
<form action="#" method="get">
  <!--get: 填写的信息会在url里面显示, 对于重要的数据来说是不安全的;
  post: 填写的信息不会在url里面显示
  -->
 用户名:<input type="text" name="username" placeholder="用户名" id="username">
 <br>
 密码:<input type="password" name="passwd" placeholder="密码" id="passwd">
 <br>
 <input type="submit" value="注册">
  
</form>
</body>
</html>

JavaScript实现表单注册、表单验证、运算符功能

JS-校验表单

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript

需求:校验用户名是否为空、密码长度是否大于6

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-检测用户名</title>
 <script>
 function checkForm() {
  var nameValue = document.getElementById('username').value;
  if (nameValue ===''){
   alert('用户名不能为空!');
   return false
  }
  var passValue = document.getElementById('passwd').value;
  if (passValue.length <= 6){
   alert('密码长度需大于6');
   return false
  }
 
 }
 
 </script>
</head>
<body>
<!--
实现步骤:
 1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
 2. 对这个事件绑定一个函数(执行的操作写在函数里面);
 3. 函数的核心功能: 校验用户名是否为空?
  1). 获取输入用户名标签提交的内容;
  2). if判断用户名是否为空?
  3). 如果数据合法, 继续执行, 提交表单;
  4). 如果数据不合法, 不让表单提交? (显示弹出框报错) --- alert
-->
<!--onsubmit 事件会在表单中的确认按钮被点击时发生-->
<form action="#" method="get" onsubmit="return checkForm()">
 
 用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
 密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
 <input type="submit" value="注册">
 
</form>
 
</body>!
</html>

JavaScript实现表单注册、表单验证、运算符功能

JavaScript实现表单注册、表单验证、运算符功能

JS-运算符

JavaScript实现表单注册、表单验证、运算符功能

与python不同,‘=='判断时,会将字符串转换为整形进行比较,‘==='判断是类型和值一起比较

5 =='5' --> true
5==='5' --> false

基于某些条件对变量进行赋值的条件运算符。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS-等号</title>
 <script>
  var x = 5;
  var y = '5';
  alert(x===y);
  var num =(5==='5')?'ok':'not ok '
  alert(num)
 </script>
</head>
<body>
 
</body>
</html>

JavaScript实现表单注册、表单验证、运算符功能

JavaScript实现表单注册、表单验证、运算符功能

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
简单实现JS计算器功能
Dec 21 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
从零开始搭建vue移动端项目到上线的步骤
Oct 15 #Javascript
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
详解ESLint在Vue中的使用小结
Oct 15 #Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 #Javascript
javascript匿名函数中的'return function()'作用
Oct 15 #Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 #Javascript
Vue-Router基础学习笔记(小结)
Oct 15 #Javascript
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php格式化json函数示例代码
2016/05/12 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
layui表格实现代码
2017/05/20 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
react build 后打包发布总结
2018/08/24 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python数组过滤实现方法
2015/07/27 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python numpy数组复制使用实例解析
2020/01/10 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
大学军训感言600字
2014/02/25 职场文书
单位委托书范本
2014/04/04 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2015团员个人年度总结
2015/11/24 职场文书