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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jquery自适应布局的简单实例
May 28 Javascript
node.js 动态执行脚本
Jun 02 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
从零开始搭建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
PHP 程序员应该使用的10个组件
2009/10/31 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
php生成短域名函数
2015/03/23 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
产品销售计划书
2014/05/04 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
功夫熊猫观后感
2015/06/10 职场文书
教师廉政准则心得体会
2016/01/20 职场文书