1.概述
JavaScript 是属于网络的脚本语言!
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
JavaScript 是因特网上最流行的脚本语言
2.js—注册表单校验雏形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style></style>-->
<!--<link>-->
<script>
window.onload = function () {
// 1. 获取用户输入的用户名的标签对象;
var uEle = document.getElementById('username');
alert(uEle);
// 2. 获取这个对象里面的值;
var uValue = uEle.value;
alert(uValue);
//
// alert("这是一个用户名!"); 弹出一个警示框
}
</script>
</head>
<body>
<!--
1. 需求:
1). 用户在注册的时候会输入一些信息, 但是用户输入的内容有可能不合法, 会导致服务器端压力过大;
2). 当用户填写信息之后, 对填写的信息进行校验(前端校验, 只能防君子不能防小人)
-后台校验: 也是需要校验的;
2. 需要掌握的技能:
0). 如何在加载页面时执行指定函数?
1). 如何获取指定元素对象?
2). 如何弹出一个警告框?
-->
<form action="#" method="get">
<!--get: 填写的信息会在url里面显示, 对于重要的数据来说是不安全的;
post: 填写的信息不会在url里面显示
-->
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
3.js—注册表单—校验用户名是否为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style></style>-->
<!--<link>-->
<script>
// *****************************1. 校验用户名是否为空? ***************************
// 需求:
// 1. 判断用户名是否为空?
// 2. 校验密码是否大于6位, 如果不满足则不合法?
// 定义一个函数
function checkForm() {
// 1). 获取输入用户名标签提交的内容;
var user = document.getElementById('username').value;
// 2). if判断用户名是否为空?
// 3). 如果数据合法, 继续执行, 提交表单;
// 4). 如果数据不合法, 不让表单提交? (显示弹出框报错) --- alert
if (user === '') {
alert("用户名不能为空!");
return false;
}
// ******************************2. 校验密码长度是否小于6 **************************
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
// var passwdlen = document.getElementById('passwd').value.length;
var passwdlen = document.getElementsByName('passwd')[0].value.length;
if (passwdlen < 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
-->
<form action="#" method="get" onsubmit="return checkForm()">
<!--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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
/*
var x = 5;
var y = '5';
var z = 5;
alert(x == y); // 两个等号做比较时, 会将字符串转换为整形进行比较;
alert(x === y);
*/
var a =(5 === '5')?'ok': 'not ok';
alert(a);
}
</script>
</head>
<body>
</body>
</html>