Javascript学习笔记

大多网页比如腾讯，百度云之类的需要登陆，用户输入账号密码就可以登陆，那么浏览器是如何获取用户的输入的呢？今天就记录一下操作表单。

操作表单与操作DOM是差不多的，表单本身也是一个DOM树，我们可以用JavaScript来获取用户输入的内容，或者对一个输入框设置新的内容。

下面是一些常用的HTML表单的输入控件：

<input type="text" id="" name="">

<input type="password" id="" name="">

<input type="radio" id="" name="">

<input type="checkbox" id="" name="">

<select>

<input type="hidden" id="" name="">

可以看到type中的内容，分别有text,password,radio.checkbox,hidden等，还有比较特殊的select，这些都是获取用户输入的不同方法，并且区别用户输入的内容，就比如text接收的是一串文本，checkbox接收的是用户选定选项的内容。

对于<input>节点，我们是可以直接通过value获取用户输入值的，也可以直接设置初始值，比如说：

<input type="text" id="setting">

var enter = document.getElementById('setting');

enter.value;//用户的输入值

<input type="text" id="change">

var input = document.getElementById('change');

input.value = 'what the hell';//设置文本框内的内容

用户输入完之后，接下来我们就要用<form>元素中的submit()来提交表单，那么如何去提交一个表单呢，我们先要了解<form>元素的特性，它可以响应一个<button>的click事件，在JavaScript代码中提交表单,但它的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应<form>本身的onsubmit事件，在提交form时作修改。

我用了一种比较常见的格式，一个简单的注册页面，比如有用户名，密码，和重复密码三个输入框，并且用正则表达式去规定用户名和密码的格式，我写了以下代码来实现提交表单的过程：

<html> 

<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">

    <p id="test-error" style="color:red">输入表单：</p>

    <p>

        用户名: <input type="text" id="username" name="username">

    </p>

    <p>

        密码: <input type="password" id="password" name="password">

    </p>

    <p>

        重复密码: <input type="password" id="password-2">

    </p>

    <p>

        <button type="submit">提交表单</button> <button type="reset">重置表单</button>

    </p>

</form>

<script>

var checkRegisterForm = function () {

    var checkusername = document.getElementById('username');

    var checkpassword = document.getElementById('password');

    var checkpasswordrepeat = document.getElementById('password-2');

    var check_user = /^\w{6,10}$/ ;    //用户名由6到10位任意数字和字母组合而成

    var check_password = /^\w{6,20}$/; //密码由6到20位任意数字和字母组合而成

    if(!check_user.test(checkusername.value))

    {

        alert('Username error');

        return false;

    }

    if(checkpassword.value!==checkpasswordrepeat.value)

    {

        alert('password error');

        return false;

    }

    alert('表单提交成功');

    return true;

    }

</script>

<input type="color" value="#ff0000">

</html>

建立好就是这个样子：

我们先不按照格式来输入：

点击提交表单，网页上方会出现警告：

如果我们把账户和密码都按格式输入会出现：

这样下来我们就成功的提交了表单到服务端。此处有个重点要记住，没有name属性的<input>是无法提交的。

且不要以为ID和name是一样的，ID是不可重复的,name是可重复的。

以上就是简单的操作表单的总结，后继可能会加一些内容上去。

------------------------------------------------------------------------------

Javascript学习笔记四——操作表单的更多相关文章

  1. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  2. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  3. JavaScript学习笔记(四十四) 装饰器

    装饰器模式(Decorator) 在装饰器模式中,可以在运行时给一个对象动态的添加额外的功能.当和静态类打交道的时候(static classes),这可能是一个挑战.但在JavaScript中,对象 ...

  4. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  5. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  6. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. JavaScript:学习笔记(5)——箭头函数=>以及实践

    JavaScript:学习笔记(5)——箭头函数=>以及实践 ES6标准新增了一种新的函数:Arrow Function(箭头函数).本文参考的链接如下: MDN箭头函数:https://dev ...

  8. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  9. Java程序猿的JavaScript学习笔记（6——面向对象模拟）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 享元模式（Flyweight）---结构型

    1 基础知识 定义:提供了减少对象数量从而改善应用所需的对象结构的方式.特征:运用共享技术有效支持大量细粒度的对象. 本质:分离与共享. 使用场景: (1)如果一个应用程序使用了大量的细粒度对象,可以 ...

  2. Java项目出现的问题01----学习

    0 运行环境 MyEcplise2016+Tomcat8.0 1 今天在html的表格提交跳转时发现,想要提交到自己写servlet程序中,却发现总是出错http://localhost:8080/T ...

  3. 001_C/C++笔试题_考察C/C++语言基础概念

    (一)文章来自:C/C++笔试题-主要考察C/C++语言基础概念.算法及编程,附参考答案 (二)基础概念 2. 头文件中的ifndef/define/endif的作用? 答:防止该头文件被重复引用. ...

  4. HMM 隐马尔科夫 Python 代码

    import numpy as np # -*- codeing:utf-8 -*- __author__ = 'youfei' # 隐状态 hidden_state = ['sunny', 'rai ...

  5. mac使用php-version切换PHP版本

    在开发过程中,有时候我们的程序对某个php版本有着极为重要的限制,特别是大型项目. 因此,我们就需要切换多个php版本来满足我们的需求. 我们使用php-version来达到这个目的. 首先我们先使用 ...

  6. java中的变量和数据类型

    变量和javascript的变量含义一样 在Java中,变量分为两种:基本类型的变量和引用类型的变量.(javascript中同样是这样的) 基本数据类型 基本数据类型是CPU可以直接进行运算的类型. ...

  7. msbuild不是内部或外部命令

    首先这个问题纠结了很久,在网上找了查阅了很多博客,大多在介绍介绍批处理为何物,但是就是没有明确的解决方案. 如果想具体了解msbuild是何物,自己查找资料把. 好吧,下面介绍下正确的解决方案. 很简 ...

  8. Linux+CLion+树莓派远程编译时，Cmake编译出现undefined reference to 'dlopen'的解决办法

    在Clion中链接讯飞的语音库并传至树莓派上编译时,出现如下错误. undefined reference to `dlopen' undefined reference to `dlclose' u ...

  9. Django基础之request对象

    当一个页面被请求时,django就会创建一个包含本次请求原信息的HttpRequest对象. django会将这个对象自动传递给响应的视图函数,一般视图函数约定俗成地使用request参数承接这个对象 ...

  10. Java线程优先级及守护线程（二）

    简述 在操作系统中,线程是可以划分优先级的,优先级较高的线程,得到CPU优先执行的几率就较高一些.设置线程的优先级,有助于帮助线程规划期选择下一个哪一个线程优先执行,但是线程优先级高不代表一定会优先执 ...