005-表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交
*/
window.onload=function(){
//获得用户名的span
var usernameEltSpan = document.getElementById("usernameSpan");
//获取用户名元素
var usernameElt = document.getElementById("username");
usernameElt.onblur=function(){
//获取用户名的values
var username = usernameElt.value;
//去除空白
username = username.trim();
//判断用户名是否为空
/*if(username){
alert(username);
}else{
alert("用户名不能为空");
}*/
//if(username.length==0){
if(username===""){
//用户名为空
usernameEltSpan.innerText="用户名不能为空";
}else{
//用户名不为空
//用户名必须在6-14位之间
if(username.length<6||username.length>14){
usernameEltSpan.innerText="用户名必须在6-14位之间";
}else{
//用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
RegExp=/^[A-Za-z0-9]+$/;
var ok = RegExp.test(username);
if(ok){
//用户名合法
}else{
usernameEltSpan.innerText="用户名只能有数字和字母组成，不能含有其它符号";
}
}
}
}
//给用户名绑定获得焦点事件onfocus
usernameElt.onfocus=function(){
// 清空非法的value
if(usernameEltSpan.innerText!=""){
usernameElt.value="";
}
// 清空span
usernameEltSpan.innerText="";
}
//获得确认密码span
var pwdEltSpan = document.getElementById("passwordSpan")
//获取确认密码对象
var pwdElt2 = document.getElementById("password1");
pwdElt2.onblur=function(){
var pwdElt1 = document.getElementById("password");
//密码
var pwd1 = pwdElt1.value;
//确认密码
var pwd2 = pwdElt2.value;
if(pwd1===pwd2){
//密码相同
}else{
pwdEltSpan.innerText="密码与确认密码不一致";
}
}
//给确认密码绑定获得焦点事件focus
pwdElt2.onfocus=function(){
if(pwdEltSpan.innerText!=""){
pwdElt2.value="";
}
pwdEltSpan.innerText="";
}
//邮箱地址合法
var emailEltSpan = document.getElementById("emailSpan");
var emailElt=document.getElementById("email");
emailElt.onblur=function(){
email = emailElt.value;
emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);
if(ok){
//邮箱地址合法
}else{
emailEltSpan.innerText="邮箱地址不合法";
}
}
//给邮箱绑定获得焦点事件focus
emailElt.onfocus=function(){
if(emailEltSpan.innerText!=""){
emailElt.value="";
}
emailEltSpan.innerText="";
}
//给提交按钮绑定鼠标单击时间
var submitBtnElt = document.getElementById("submitBtn");
submitBtnElt.onclick=function(){
// 触发username的blur userpwd2的blur email的blur
// 不需要人工操作,使用纯JS代码触发事件.
usernameElt.focus();
usernameElt.blur();
pwdElt2.focus();
pwdElt2.blur();
emailElt.focus();
emailElt.blur();
// 当所有表单项都是合法的时候,提交表单
if(usernameEltSpan.innerText==""&&pwdEltSpan.innerText==""&&emailEltSpan.innerText==""){
//获取表单对象
var userFormElt = document.getElementById("userForm");
// 可以在这里设置action,也可以不在这里
userFormElt.action="http://localhost:8080/jd/save";
//提交表单
userFormElt.submit();
}
}
}
</script>
<form id="userForm" method="get">
用户名<input type="text" name="username" id="username"/><span id="usernameSpan"></span><br>
密码<input type="text" name="password" id="password"/><br>
确认密码<input type="text" id="password1" /><span id="passwordSpan"></span><br>
邮箱<input type="text" name="email" id="email" /><span id="emailSpan"></span><br>
<!--<input type="submit" value="注册" />-->
<input type="button" value="注册" id="submitBtn" />
<input type="reset" value="重置" />
</form>
</body>
</html>
006-复选框的全选和取消全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框的全选和取消全选</title>
</head>
<body>
<script type="text/javascript">
/*
window.onload=function(){
var chk=document.getElementById("Chk");
chk.onclick=function(){
// 获取第一个复选框的选中状态(复选框对象checkbox对象)
//alert(chk.checked);
//根据name获取所有元素
var aiHaolist = document.getElementsByName("aihao");
if(chk.checked){
//全选
for(var i = 0;i<aiHaolist.length;i++){
aiHaolist[i].checked=true;
}
}else{
for(var i = 0;i<aiHaolist.length;i++){
aiHaolist[i].checked=false;
}
}
}
}
*/
window.onload=function(){
var aihaos = document.getElementsByName("aihao");
var chk = document.getElementById("Chk");
chk.onclick=function(){
for(var i = 0 ; i<aihaos.length;i++){
aihaos[i].checked=chk.checked;
}
}
//对以上数组进行遍历
var all=aihaos.length;
for(var i = 0 ;i<aihaos.length;i++){
aihaos[i].onclick=function(){
var checkedCount = 0;
// 总数量和选中的数量相等的时候,第一个复选框选中
for(var i = 0 ; i<aihaos.length;i++){
if(aihaos[i].checked){
checkedCount++;
}
}
chk.checked=(all==checkedCount);
/*if(all == checkedCount){
chk.checked=true;
}else{
chk.checked=false;
}*/
}
}
}
</script>
<input type="checkbox" id="Chk"/><br>
<input type="checkbox" name="aihao" value="sing"/>唱<br>
<input type="checkbox" name="aihao" value="dance"/>跳<br>
<input type="checkbox" name="aihao" value="rap"/>Rap<br>
</body>
</html>
007-获取下拉列表选中项的value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取下拉列表选中项的value</title>
</head>
<body>
<script type="text/javascript">
/*s
<select id="provinceList" onchange="alert(this.value)">
<option value="">请选择省份</option>
<option value="sx">陕西</option>
<option value="hb">河北</option>
<option value="sd">山东</option>
<option value="hn">河南</option>
</select>
*/
window.onload=function(){
var proListElt=document.getElementById("provinceList");
proListElt.onchange=function(){
// 获取选中项的value
alert(proListElt.value)
}
}
</script>
<select id="provinceList" >
<option value="">请选择省份</option>
<option value="sx">陕西</option>
<option value="hb">河北</option>
<option value="sd">山东</option>
<option value="hn">河南</option>
</select>
</body>
</html>
<!--
省份和市区的关系是：1对多
省份表t_province
id pcode pname
----------------------------
1 001 河北省
2 002 河南省
3 003 山东省
4 004 山西省
市区表t_city
id ccode cname pcode(fk)
----------------------------------------------
1 101 石家庄 001
2 102 保定 001
3 103 邢台 001
4 104 承德 001
5 105 张家口 001
6 106 邯郸 001
7 107 衡水 001
前端用户选择的假设是河北省，那么必须获取到河北省的pcode，获取到001
然后将001发送提交给服务器，服务器底层执行一条SQL语句：
select * from t_city where pcode = '001';
返回一个List集合，List<City> cityList;
cityList响应浏览器，浏览器在解析cityList集合转换成一个新的下拉列表。
-->
008-显示网页时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示网页时钟</title>
</head>
<body>
<script type="text/javascript">
/*
关于JS中内置的支持类：Date,可以用来获取时间/日期
*/
//获取系统当前时间
var nowTime=new Date();
//输出
//document.write(nowTime);
//转换成具体本地语言的日期格式
nowTime=nowTime.toLocaleString();
document.write(nowTime);
document.write("<br>");
document.write("<br>");
// 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式
var t = new Date();
var year = t.getFullYear();// 返回年信息,以全格式返回
var month = t.getMonth();// 月份是:0-11
//var dayOfWeek = t.getDay();// 获取的一周的第几天(0-6)
var day = t.getDate();// 获取日信息
document.write(year+"年"+(month+1)+"月"+day+"日");
document.write("<br>");
document.write("<br>");
//重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
//var times=t.getTime();
//document.write(times);// 一般会使用毫秒数当做时间戳. (timestamp)
document.write(new Date().getTime());
</script>
<script type="text/javascript">
function dispalyTime(){
var time = new Date();
var strTime = time.toLocaleString();
document.getElementById("timeDiv").innerHTML=strTime;
}
//每隔1秒调用displayTime()函数
function start(){
v=window.setInterval("dispalyTime()",1000)
}
function stop(){
window.clearInterval(v);
}
</script>
<input type="button" value="显示系统时间" onclick="start()"/>
<input type="button" value="系统时间停止" onclick="stop()"/>
<div id="timeDiv"></div>
</body>
</html>
|