今天讲javascript第四次课,主要还是讲了一些例子。
一.表单的验证,这要实现的功能1.防止注册的账号或密码为空 2.验证密码强度
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
span{
color:red;
}
.s{
width:200px;
height:20px;
}
.strong{
width:40px;
height:20px;
display:inline;
margin:0px;
padding:0px;
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<form action="a.jsp" id="form">
账号 <input type="text" name="" id="user" autocomplete="off"/>
<span id="user-s"></span>
<br />
密码 <input type="password" name="" id="psd" />
<span id="psd-s"></span>
<div class="s">
<div class="strong" id="s1"></div>
<div class="strong" id="s2"></div>
<div class="strong" id="s3"></div>
</div>
<div class="clear"></div>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var user=document.getElementById("user");
var psd=document.getElementById("psd");
var user_s=document.getElementById("user-s");
var psd_s=document.getElementById("psd-s");
var s1=document.getElementById("s1");
var s2=document.getElementById("s2");
var s3=document.getElementById("s3");
var score=0;
function check(){
if(user.value.trim()==""){
user.value="";
user.focus();
user_s.innerHTML="用户名不能为空";
return false;
}
if(psd.value.trim()==""){
psd.value="";
psd.focus();
psd_s.innerHTML="密码不能为空";
return false;
}
};
user.onblur=check;
psd.onblur=function(){
check();
strongCheck();
};
document.getElementById("form").onsubmit=check();
user.onkeydown=function(){
user_s.innerHTML="";
};
psd.onkeydown=function(){
psd_s.innerHTML="";
strongCheck();
};
function strongCheck(){
score=0;
var reg1=/^\d+$/;
var reg2=/^[a-zA-z]+$/;
var reg3=/^\w+$/;
var reg4=/\w*[!@#$%^&*()~ ]+\w*/;
if(psd.value.length<6){
score+=10;
}else{
score+=30;
}
if(reg1.test(psd.value)){
score+=10;
}else if(reg2.test(psd.value)){
score+=20;
}else if(reg3.test(psd.value)){
score+=30;
}else if(reg4.test(psd.value)){
score+=40;
}
if(score<=50){
s1.style.backgroundColor="red";
s2.style.backgroundColor="#fff";
s3.style.backgroundColor="#fff";
}else if(score<=60){
s1.style.backgroundColor="red";
s2.style.backgroundColor="blue";
s3.style.backgroundColor="#fff";
}else{
s1.style.backgroundColor="red";
s2.style.backgroundColor="blue";
s3.style.backgroundColor="green";
}
};
</script>
</body>
</html>
2.省市级联
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<select name="" id="province">
<option value="choose">请选择省份</option>
<option value="hn">河南</option>
<option value="sd">山东</option>
<option value="gd">广东</option>
</select>
<select name="" id="city">
<option value="choose">请选择城市</option>
</select>
<script type="text/javascript">
var province=document.getElementById("province");
var citys=[["济源","焦作","新乡"],["菏泽","济南","青岛"],["广州","珠海","深圳"]];
province.onchange=function(){
var index=province.selectedIndex-1;
document.getElementById("city").length=1;
for(var i in citys[index]){
var city=citys[index][i];
var option=new Option(city,city);
document.getElementById("city").options.add(option);
}
}
</script>
</body>
</html>
最后还讲了一些正则表达式,因为我以前写过关于正则表达式的博客,所以在这里就不多说了
分享到:
相关推荐
javaScript课件第4课,内容讲解细致,深入浅出,非常适合初学者学习!
javascript编程起步(第四课).docx
javascript编程起步(第四课)_1.docx
第4课 第一页 JavaScript高级教程- 第4天 第二页 图象映射与JavaScript 第三页 预装图象 - 是什么? 第四页 预装图象 - 怎么做? 第五页 对象的优点 第六页 创建你自己的对象 第七页 你的面向对象的虚拟宠物 ...
第4课 - CSS进阶 - [精通JavaScript+jQuery] 第5课 - DOM模型 - [精通JavaScript+jQuery] JavaScript开发进阶 第6课 - JavaScript事件 - [精通JavaScript+jQuery] 第7课 - 表格与表单 - [精通JavaScript+jQuery]...
Windows特性 JavaScript文件目标模块 状态条的操作 窗口间的交流 再谈JavaScript DOM 窗口的其它特性 再谈Window及Frame树杈结构 自己动手操作 第三天复习 第四课 ...
第4课 JavaScript BOM基础 学习浏览器对象模型“BOM”,可以对浏览器窗口进行访问和操作,与浏览器“对话” 第5课 JavaScript实现轮播特效 综合运用JavaScript知识,做出轮播图、tab页切换等实用特效 第6课 ...
javascript asp教程第四课 同时使用vbscript和javascript
JavaScript初级教程(第一课)
第一课 用Python编程 信息技术新世纪版 八年级上 第1单元第一课-用Python编程(ppt)全文共28页,当前为第1页。 新知导入 观看"太阳花... 第1单元第一课-用Python编程(ppt)全文共28页,当前为第4页。 新知讲解 在
javascript编程起步(第四课)
JavaScript进阶教程(第四课第一部分)
第四页 什么是变量 第五页 变量的使用方法 第2课 第一页 Javascript高级教程-第2日 第二页 神奇的字符串处理 第三页 子字符串 第四页 分割方法(splitting method) 第五页 相关数组 第六页 相关数组的一个例子 第七...
JavaScript初级教程(第四课)
JavaScript初级教程(第五课)
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案