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的控制tabs打开的数量的代码
Oct 17 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
详解Node 定时器
Feb 26 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP缓冲区用法总结
2016/02/14 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
python常用知识梳理(必看篇)
2017/03/23 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
家长写给老师的建议书
2014/03/13 职场文书
同学聚会策划方案
2014/06/06 职场文书
公司委托书格式
2014/08/01 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
护理工作个人总结
2015/03/03 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
导游词之无锡梅园
2019/11/28 职场文书