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类继承机制的原理分析
Sep 12 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
原生js实现放大镜
Feb 20 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
从零开始搭建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 破解防盗链图片函数
2008/12/09 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php筛选不存在的图片资源
2015/04/28 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
使用Python生成XML的方法实例
2017/03/21 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
2013年军训通讯稿
2014/02/05 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python