21
2020
09

JavaScript的使用误区和表单验证:json,json.parse()方法和json.stringify()

赋值运算符应用错误:

在  程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==),if 条件语句返回 false (是我们预期的)因为 x 不等于 10        var x = 0;//变量赋值   document.getElementById("demo").innerHTML = Boolean(x == 10);   //这里的x是等于10所有结果为false;

var x = 0;    document.getElementById("demo").innerHTML = Boolean(x = 10);  语句返回 true 因为条件语句执行为 x 赋值 10,10 为 true

var x = 0;      document.getElementById("demo").innerHTML = Boolean(x = 0);  语句返回 false因为条件语句执行为 x 赋值 0,0 为 false     //赋值语句返回变量的值

比较运算符的常见错误:var x = 10;   var y  = "10"

 document.getElementById("demo").innerHTML = Boolean(x == y);

运行结果为true,y是一个字符串x是一个数组并不会相等

”===“为恒等计算符,同时检查表达式的值与类型,var x = 10;var y = "10";

if (x === y)返回false

 switch 语句中出现:switch(x) { case 10: alert("Hello");}

switch(x) {case "10": alert("Hello");}//前者会执行alert弹窗,后者由于类型不一直并不会执行alert弹窗;

加法与连接:加法是两个数字相加,连接是两个字符串连接加法和连接都使用 + 运算符 var x = 10 + 5;    //15  var x = 10 + "5"; //105;

字符串的分行:可以在字符串中使用断行语句  blob.png字符串中直接使用回车换行是会报错的blob.png如果需要的话可以使用“\”

在定义数组元素的时候后面不能添加逗号,在不同的浏览器可能得到不同的结果

var  colors=[5,6,7];

定义对象,最后不能添加逗号:

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460}

Undefined 不是 Null,null 用于对象, undefined 用于变量,属性和方法对象只有被定义才有可能为 null,否则为 undefined需要先使用 typeof 来检测对象是否已定义:

if (typeof myObj !== "undefined" && myObj !== null)

表单验证:HTML 表单验证可以通过js来完成

判断表单字段(fname)值是否存在,如果不存在,就阻止表单提交:

必填(或必选)项目

检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true

function validateForm() {   var x = document.forms["myForm"]["fname"].value;  

  if (x == null || x == "") {        alert("需要输入名字。");      

       return false;    

 }

}

再写一个表单:

<form name="myForm" action="demo_form.php"

on\="return validateForm()" method="post">

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

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

</form>

blob.pngblob.png

对输入数字的验证:

<h1> 验证输入</h1>

<p>请输入 1 到 10 之间的数字:</p>

<input id="numb">

<button type="button" on\="myFunction()">提交</button>

<p id="demo"></p>

<script>

function myFunction() {

    var x, text;

    // 获取 id="numb" 的值

    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误 Not a Number or less than one or greater than 10

    if (isNaN(x) || x < 1 || x > 10) {

        text = "输入错误";

    } else {

        text = "输入正确";

    }

    document.getElementById("demo").innerHTML = text;

}

</script>

blob.png  blob.png

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

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

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

</form>

点击提交按钮,如果输入框是空的,浏览器会提示错误信息,点击提交将会跳转页面

数据验证:数据验证用于确保用户输入的数据是有效的,验证必需字段是否有输入,

用户是否输入了合法的数据,在数字字段是否输入了文本?  服务端数据验证是在数据提交到服务器上后再验证,而客户端数据验证是在数据发送到服务器前,在浏览器上完成验证

json

JSON 是用于存储和传输数据的格式,通常用于服务端向网页传递数据,是一种轻量级的数据交换格式,独立的语言

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

使用 JSON 语法定义了 employees 对象:定义三个人(对象)记录的数组

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

Json格式转化后为对象,在语法上与创建  对象代码是相同的  程序可以将 JSON 数据转换为  对象

json语法规则:数据为 键/值 对,数据由逗号分隔,大括号保存对象,方括号保存数组json一个数据一个名称对应一个值   "name":"Runoob"


json对象:保存在大括号中,对象可以保存多个 键/值 对:访问对象值使用(.)

var myObj, x;

myObj ={"name":"Runoob","alexa":1000,"site":null};

x = myObj.name

document.getElementById("demo").innerHTML = x;        x的值为:Runoob

还可以使用中括号([ ])l来访问对象的值    x = myObj["name"];


json循环对象:使用for-in来循环对象属性

<script>

var myObj = { "name":"runoob", "alexa":10000, "site":null };

for (x in myObj) {

    document.getElementById("demo").innerHTML += x + "<br>";

}                                                           

</script>                   

在 for-in 循环对象的属性时,使用中括号([])来访问属性的值:

document.getElementById("demo").innerHTML += myObj[x] + "<br>";


嵌套json对象,json对象中可以包含另外一个json对象


<script>

myObj = {

"name":"runoob",

"alexa":10000,

"sites": {

"site1":"www.runoob.com",

"site2":"m.runoob.com",

"site3":"c.runoob.com"

}

}

document.getElementById("demo").innerHTML += myObj.sites.site1 + "<br>";或者document.getElementById("demo").innerHTML +=myObj.sites["site1"];



json修改值:可以使用点号(.)来修改json对象的值和使用中括号([])来修改json值

<script>

var myObj,j, x = "";   //定义变量

myObj = {            //创建ison嵌套对象

    "name":"runoob",

    "alexa":10000,

    "sites": {

        "site1":"www.runoob.com",

        "site2":"m.runoob.com",

        "site3":"c.runoob.com"

    }

}

myObj.sites.site2 = "www.google.com"   //使用号(.)来修改 "site2"的值

或者myObj.sites["site2"] ="www.google.com";使用括号[]来修改"site2"值

for (j in myObj.sites) {     //用for-in 循环对象,使用中括号([])来访问属性的值

    x += myObj.sites[j] + "<br>";  }    

document.getElementById("demo").innerHTML = x;

</script>


json删除对象属性:使用 delete 关键字来删除 JSON 对象的属性或者使用中括号([])来删除 JSON 对象的属性:

<script>

json数组

数组作为json对象,数组在中括号中书写JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null),数组值可以是以上的 JSON 数据类型,也可以是  的表达式,包括函数,日期,及undefined

json对象中的数组:对象属性的值可以是一个数组

<script>

var myObj, x;

myObj = {

"name":"网站",

"num":3,

"sites":[ "Google", "Runoob", "Taobao" ]  //定义数组

}

x = myObj.sites[0];   //使用索引值来访问数组

document.getElementById("demo").innerHTML = x;

</script>

循环数组使用for-in来访问数组:或者使用for循环

<script>

var myObj, i, x = "";

myObj = {

"name":"网站",

"num":3,

"sites":[ "Google", "Runoob", "Taobao" ]

};

for (i in myObj.sites) {  //使用for循环for (i = 0; i < myObj.sites.length; i++){

    x += myObj.sites[i] + "<br>";

}

document.getElementById("demo").innerHTML = x;

</script>

嵌套json对象中的数组,数组可以包含另外一个数组,或者另外一个 JSON 对象

<script>

var myObj, i, j, x = "";

myObj = {

    "name":"网站",

    "num":3,

    "sites": [           //数组嵌套

        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },

        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },

        { "name":"Taobao", "info":[ "淘宝", "网购" ] }

    ]

}

for (i in myObj.sites) {       //使用 for-in 来循环访问每个数组的name

    x += "<h2>" + myObj.sites[i].name + "</h2>";

    for (j in myObj.sites[i].info) {    

        x += myObj.sites[i].info[j] + "<br>";//使用 for-in 来循环访问每个数组info

    }

}

document.getElementById("demo").innerHTML = x;

</script>

修改数组值,使用索引值来修改数组值:

使用 delete 关键字来删除数组元素:

<script>

var myObj, i, x = "";

myObj = {

"name":"网站",

"num":3,

"sites":[ "Google", "Runoob", "Taobao" ]

};

delete myObj.sites[1];   //使用 delete 关键字来删除数组sites中的第一个元素

for (i in myObj.sites) {

    x += myObj.sites[i] + "<br>";

}

document.getElementById("demo").innerHTML = x;

</script>

json.parse(),JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串,使用 JSON.parse() 方法将数据转换为  对象

语法:JSON.parse(text[,reviver])

text:必需, 一个有效的 JSON 字符串,reviver: 可选,一个转换结果的函数,将为对象的每个成员调用此函数

例如我们从服务器接收了以下数据:{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }可以使用JSON.parse() 方法处理以上数据,将其转换为  对象:

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

在网页上使用json数据

<script>

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

document.getElementById("demo").innerHTML = obj.name + ":" + obj.site;

</script>

运行结果为:runoob:www.runoob.com

JSON.stringify()  方法将  对象转换为字符串:

语法:JSON.stringify(value[,replacer[,space]]

value:必需, 要转换的  值(通常为对象或数组)

replacer:用于转换结果的函数或数组

space:文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t

对象转换

向服务器发送以下数据:

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

使用 JSON.stringify() 方法处理以上数据,将其转换为字符串:

var myJSON = JSON.stringify(obj);

myJSON 为字符串,将 myJSON 发送到服务器

运行结果为:{"name":"runoob","alexa":10000,"site":"www.runoob.com"}

数组转化,  数组转换为 JSON 字符串

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];

var myJSON = JSON.stringify(arr);

document.getElementById("demo").innerHTML = myJSON;

运行结果:["Google","Runoob","Taobao","Facebook"]

异常处理解析数据,JSON 不能存储 Date 对象,可以使用SON.stringify()将所有日期转换为字符串

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};

var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

 运行结果:{"name":"Runoob","initDate":"2020-09-24T10:31:08.752Z","site":"www.runoob.com"}

JSON 不允许包含函数,JSON.stringify() 会删除  对象的函数

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};

var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

运行结果:{"name":"Runoob","site":"www.runoob.com"}

或者可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免删除  对象的函数

<script>

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};

obj.alexa = obj.alexa.toString();

var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

</script>

运行结果: {"name":"Runoob","alexa":"function () {return

10000;}","site":"www.runoob.com"}

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。