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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
vue中appear的用法
Aug 17 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
js模糊查询实例分享
2016/12/26 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
巧用canvas
2017/01/21 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Python中按值来获取指定的键
2019/03/04 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
小加工厂管理制度
2014/01/21 职场文书
警校毕业生自我评价
2014/04/06 职场文书
自主招生推荐信范文
2014/05/10 职场文书
关于运动会的广播稿
2014/09/22 职场文书
党的群众路线调研报告
2014/11/03 职场文书