JavaScript实现表单注册、表单验证、运算符功能

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>

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>

JS-运算符

与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>

赞 (0)

相关推荐

  • js正则表达式注册页面表单验证

    js正则表达式注册页面表单验证

    正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g

  • JS实现验证码倒计时的注册页面

    JS实现验证码倒计时的注册页面

    原型图 需求:手机号验证 发送验证码之后开始60S倒计时 60s以后如果没有填写验证码,可重新发送 <!doctype html> <html> <head> <meta charset="utf-8"> <title>注册</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta

  • js实现登录注册框手机号和验证码校验（前端部分）

    开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • JS+jQuery实现注册信息的验证功能

    用JS和JQuery实现的效果是一样的. HTML代码 <legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="tex

  • js注册时输入合法性验证方法

    本文实例为大家分享了js正则表达式验证输入合法性的具体代码,供大家参考,具体内容如下 // 验证用户名,只允许 字母 数字 下划线 中文 //在input元素后面增加一个span元素,提示 function confirmName(){ var name=document.getElementById("user_name"); name.onblur=function(){ if((name.value).length!=0){ reg=/^[\u4e00-\u9fa5_a-zA-Z

  • PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】

    本文实例讲述了PHP实现表单提交数据的验证处理功能.分享给大家供大家参考,具体如下: 防XSS攻击代码: /** * 安全过滤函数 * * @param $string * @return string */ function safe_replace($string) { $string = str_replace('%20','',$string); $string = str_replace('%27','',$string); $string = str_replace('%2527',

  • javascript判断并获取注册表中可信任站点的方法

    javascript判断并获取注册表中可信任站点的方法

    本文实例讲述了javascript判断并获取注册表中可信任站点的方法.分享给大家供大家参考.具体分析如下: 判断可信任站点,首先要在注册表中找到可信任站点在注册表中的位置,如下: (1)域名作为可信任站点在注册表中的位置: HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\InternetSettings\\ZoneMap\\Domains\\ (2)IP作为可信任站点在注册表中的位置: HKCU\\Software\\Microsoft\\

  • Win2000注册表应用—注册表使用全攻略之九

    Win2000注册表应用-注册表使用全攻略之九 一.修改开始菜单和任务栏 此次更改的注册表项目是在HKEY_CURRENT_USER下的,如果只想针对某一用户则只需要修改HKEY_USERS\用户代码(比如S-1-5-21-448539723-113007714-842925246-1000) 下的相应键值就可以了. 1.禁止开始菜单上的上下拖动 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explor

  • 恶意网页之注册表后门—注册表使用全攻略之十九

    恶意网页之注册表后门-注册表使用全攻略之十九 浏览器顽固不改, 修改注册表成功,重新启动后又恢复到被修改的状态 主要是修改注册表后留后门,目的让你修改注册表好像成功,重新启动后又恢复到被修改的状态. 这主要是在启动项里留了后门,大家可以打开注册表到 HKCU\Software\Microsoft\Windows\CurrentVersion\Run HKCU\Software\Microsoft\Windows\CurrentVersion\RunOnce HKCU\Software\Micro

  • 注册表基础—注册表使用全攻略之一

    一.注册表基础微软采用注册表来统一管理软硬件配置,从而大大提高了系统的稳定性和安全性,同时也使我们能更容易的对系统进行维护和管理. (一)注册表基础ABC 总的来说注册表实际上是一个庞大的数据库,它包含了应用程序和系统软硬件的全部配置信息,初始化信息及其它重要数据.从一般用户的角度看,注册表系统由两部分组成:注册表数据库和注册表编辑器.其中注册表数据库包括两个文件:System.dat和User.dat.前者是用来保存计算机的系统信息,如安装的硬件和设备驱动程序的有关信息等;后者则是用来保存每个

  • 批处理操作注册表完全攻略(读取注册表/写入注册表等)

    一,批处理生成.Reg文件操作注册表 用批处理中的重定向符号可以轻松地生成.reg文件.然后用命令执行.reg文件即可! 这里,着重要了解.reg文件操作注册表的方法. 首先.reg文件首行必须是:Windows Registry Editor Version 5.00.然后才是操作注册表的内容. (就和从注册表中导出的文件格式一致) 1,创建子项 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\TTT] 在HK

  • WinXP注册表应用—注册表使用全攻略之八

    Win XP注册表还原简单一法 Win XP提供了一个还原注册表的新方法,步骤如下: l．重新启动计算机,在看到"选择启动操作系统"消息后,请按"F8"键. 2．使用箭头键突出显示"最后一次正确的配置",然后按Enter键.必须关闭NUM LOCK,数字键盘上的箭头键才能工作. 3．如果有双启动或多启动系统,请使用箭头键突出显示要启动的操作系统,然后按"Enter"键. 成功启动Windows后,注册表将恢复到上次成功启动计算

  • 玩转注册表 系统注册表文件解锁奇招

    很多人由于浏览了恶意网站从而导致注册表被锁,相关报刊介绍了各种各样的处理方法,例如通过编辑注册表文件或用超级兔子等工具来进行修改等等.但是如果你手头一时无此类工具,又记不住注册表文件的内容,该怎么办呢?其实,你完全可以利用微软在系统安装光盘中所提供的另一款利器--系统策略编辑器(Poledit),轻松地解决这个问题.不仅如此,你还可以利用系统策略编辑器来实现一些只有通过修改注册表才能实现的功能. 我们以在Windows 9x操作系统下的使用为例来介绍.首先将安装光盘中Tools\Reskit\N

  • dos(cmd)中删除、添加、修改注册表命令

    regedit的运行参数 REGEDIT [/L:system] [/R:user] filename1 REGEDIT [/L:system] [/R:user] /C filename2 REGEDIT [/L:system] [/R:user] /E filename3 [regpath] /L:system Specifies the location of the SYSTEM.DAT file. /R:user Specifies the location of the USER.D

  • Reg命令使用详解 批处理操作注册表必备

    只有在别无选择的情况下,才直接编辑注册表.注册表编辑器会忽略标准的安全措施,从而使得这些设置会降低性能.破坏系统,甚至要求用户重新安装Windows.可以利用"控制面板"或"Microsoft管理控制台(MMC)"中的程序安全更改多数注册表设置.如果必须直接编辑注册表,则请首先将其备份.使用Reg直接编辑本地或远程计算机的注册表.这些更改有可能造成计算机无法操作并需要重新安装操作系统.所以不要直接编辑注册表,而应尽可能利用"控制面板"或"

随机推荐