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处理table表格的代码
Dec 06 Javascript
javascript之Partial Application学习
Jan 10 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
JAVA/JSP学习系列之二
2006/10/09 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
python中类的一些方法分析
2014/09/25 Python
python求列表交集的方法汇总
2014/11/10 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
教师党员公开承诺书
2014/03/25 职场文书
教师批评与自我批评范文
2014/10/15 职场文书