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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
Javascript 二维数组
Nov 26 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
js实现购物车功能
Jun 12 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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中iconv函数使用方法
2008/05/24 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
一篇不错的Python入门教程
2007/02/08 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
国际政治个人自荐信范文
2013/11/26 职场文书
小学教师管理制度
2014/01/18 职场文书
学生检讨书范文
2015/01/27 职场文书
辞职信的写法
2015/02/27 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
房产遗嘱范本
2015/08/06 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP