今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了。主要是讨论实际应用的问题。

1.表单验证:

a.html自动验证:

HTML 表单验证可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交:

<form action="demo_form.php" method="post">

<input type="text" name="fname" required="required">

<input type="submit" value="提交">

</form>

b.JavaScript验证:

以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:

function validateForm() {

var x = document.forms["myForm"]["fname"].value;

if (x == null || x == "") {

alert("需要输入名字。");

return false;

}}

然后在html里面:

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">

名字: <input type="text" name="fname">

<input type="submit" value="提交">

</form>

这个只是其中一个例子,实际应用中 validateForm 这个函数(方法)可以改动,比如说可以验证输入是否是email,或者是否是纯数字之类的。

c.使用DOM:

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} }
</script>

这个代码会验证输入是否是属于100-300这个区间。

2.let和const:

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量

这篇文章写的很清楚,建议去看一看:https://www.cnblogs.com/slly/p/9234797.html

3.JSON(JavaScript Object Notation)文件:

JSON 是用于存储和传输数据的格式,通常用于服务端向网页传递数据 。

注意JSON是独立的语言 ,JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本,其文本可以被任何编程语言读取及作为数据格式传递。

{"sites":[

{"name":"Runoob", "url":"www.runoob.com"},

{"name":"Google", "url":"www.google.com"},

{"name":"Taobao", "url":"www.taobao.com"}

]}

一个名称对应一个值,对象保存在大括号内。JSON 数组保存在中括号内。

如果我们想要在JS代码里面使用Json,我们需要将其转换成JS对象:

var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后就可以赋值给元素:

obj = JSON.parse(text);

document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

也可以反过来把js对象转换成json文件:

var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"} str_pretty1 = JSON.stringify(str)

引用:https://www.runoob.com/js/js-json.html

https://www.cnblogs.com/slly/p/9234797.html

JavaScript自学笔记(1)---表单验证,let和const,JSON文件相关推荐

  1. JavaScript中的基本表单验证

    In the past, form validation would occur on the server, after a person had already entered in all of ...

  2. html表单验证用正则表达式,JavaScript 使用正则表达式进行表单验证的示例代码

    搜索热词 JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 function regIsDigit(fData) { var reg = new RegExp(& ...

  3. JavaScript:综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  4. JavaScript入门 轮播/表单验证 Day17

    轮播案例:实现无缝轮播.轮播指示器.滑动效果 <div class="swiper-wraper"><!-- 相框 --><div class=&qu ...

  5. 笔记:表单验证以及sweetalert中swal的使用

    1.表单验证jsp页面表单样例 <div class="input-group input-group-lg"><span class="input-g ...

  6. JavaScript 学习笔记 - 6 表单处理

    目录 6.1 选择并转移导航菜单 6.2 动态地改变菜单 6.3 建立必须填写的字段 6.4 根据其他字段对字段进行检查 6.5 标识有问题的字段 6.6 准备进行表单验证 6.7 处理单选按钮 6. ...

  7. javascript:正则表达式、一个表单验证的例子

    阅读目录 本文内容: 正则表达式: 利用正则表达式进行表单验证的例子: 回到顶部 本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的 ...

  8. AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

    这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...

  9. php笔记之表单验证

    1.php <meta charset="utf-8"> <form method="post" action="2.php&quo ...

  10. php把表单转为json保存,javascript – 使用jquery将表单数据保存到本地json文件中

    我有一个带有一些输入字段的基本表单.我想在提交表单时将表单数据保存到json文件中. json文件中保存数据的格式应如下所示. [ {"title":"some text ...

最新文章

  1. 利用 libvirt 和 Linux 审计子系统跟踪 KVM 客户机
  2. HDU 4023 (博弈 贪心 模拟) Game
  3. Centos7安装Python3.6
  4. PendingIntent与Intent的区别
  5. 一个简单的LINQ TO XML, AJAX 例子[译]
  6. python打乱顺序的洗牌函数
  7. easyui中combotree只能选子选项,父级不被选中
  8. nodejs 读取excel文件,并去重
  9. python中数组,列表和集合的区别
  10. gh-ost 参数解析,看这一篇就够了!
  11. 不积跬步无以至千里---工作收获
  12. Error(错误)、Exception(异常)之间区别
  13. 声学模型(一) hmm声学训练流程
  14. RPG游戏制作:(1)自定义角色
  15. 文档习惯之格式篇 用文档逼疯一个人的五种办法
  16. J2EE下使用AJAX(四) 隐藏帧 -- 史前的AJAX实现
  17. 舆情传播的全过程如何监控监测?
  18. java 获取今天或者某一天是星期几/周几以及几号的方法
  19. Java 生成二维码 zxing生成二维码 条形码 服务端生成二维码 Java生成条形码
  20. 面试官:RecyclerView布局动画原理了解吗?

热门文章

  1. 通过GeoIP获取ip所属地 (国家,城市,时区,邮编,经纬度等)
  2. redis——redis事务相关处理
  3. ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平
  4. 神奇的python(一)之python脚本调用shell常用方法
  5. Annaconda环境下查询Python 第3方包的版本号
  6. windows中运行qt5构建的程序提示 无法启动此程序,因为计算机中丢失qt5Cored.dll 解决方法
  7. log4j的使用 20210719091111861
  8. 类的定义 java 1613806383
  9. 更新显示当前歌曲的名称 winform 0130
  10. 描述符演练-01-完善代码,使得对象添加属性的行为可以成功