 |
您当前所在位置：首页 > 中心动态 | >> |
| javascript学习笔记:js的验证与正则表达式 |
 |
javascript学习课程报名咨询：常州文化宫校区：0519-69886161、新北校区：0519-68877558！
1、window对象：
window.open()、close()、alert()、confirm()
window.open()：打开新窗口
如：在body上添加onload="window.open('http://www.baidu.com')"
打开页面时，同时打开另一个页面！
例子：
<input type="button" value="关闭窗口" onclick="window.close()">
window：窗口
document：文档
2、js跳转：location.href、location.replace
<input type="button" value="跳转到百度" onclick="location.href='http://www.baidu.com'"/>
<br />
<input type="button" value="跳转到新浪" onclick="location.replace('http://www.sina.com.cn')"/>
location.href：可以保留历史页面，可以后退
location.replace()：不能后退！
3、js时间判断
A、setTimeout()：当计时时间到了之后做一件事情
3秒后跳转到百度首页！
<script type="text/javascript">
setTimeout("location.href='http://www.baidu.com'",3000);
</script>
B、setInterval()：每隔一个时间周期，做一件事情
clearInterval()：停止某个id对应的计时器
思路：每隔1秒获取计时器中间的数字，并且+1
例子：简单计时器
<style type="text/css">
.content{
width:300px;
height:100px;
font-size:60px;
text-align:center;
font-family:'微软雅黑';
margin:0px auto;
background-color:green;
color:#FFF;
}
</style>
<script type="text/javascript">
var id;
//计时函数
function gettime(b){
if(b.value == "开始计时"){
id = setInterval("getnum()",1000);
b.value = "暂停计时";
}else{
clearInterval(id);
b.value = "开始计时";
}
}
//获取div中间的数字，加1，替换原来的数字
function getnum(){
var div = document.getElementById("content");//获取div
var n = div.innerHTML;
n++;
div.innerHTML = n;
}
//清零
function restart(){
document.getElementById("content").innerHTML = 0;
var bt = document.getElementById("bt01");//开始/停止计时的按钮
//如果计时器处于计时的状态，则需要停止计时
if(bt.value == "暂停计时"){
clearInterval(id);
bt.value = "开始计时";
}
}
</script>
<div class="content" id="content">0</div>
<p align="center">
<input type="button" value="开始计时" onclick="gettime(this)" id="bt01"/>
<input type="button" value="清零" onclick="restart()"/>
</p>
4、js表单验证
<style type="text/css">
body{
font-family:'微软雅黑';
}
h1{
font-size:24px;
text-align:center;
}
.error{
color:#F00;
}
/* 不满足要求的输入框的样式 */
.error_input{
background-color:pink;
border:1px solid #F00;
}
</style>
<script type="text/javascript">
//检验表达内容是否满足要求
function check(){
var r = true;
//获取元素：document.表单名.控件名
var u = document.regform.username;//用户名输入框
var p = document.regform.password;//密码框
var p2 = document.regform.password2;//密码框
//如果用户名没有填写
if(u.value == ""){
r = false;
document.getElementById("namemsg").innerHTML = "用户名不能为空";
u.className = "error_input";//修改用户名输入框对应的class的值
}else{
document.getElementById("namemsg").innerHTML = "";
u.className = "";
}
//如果密码不是6~12位
if(p.value.length < 6 || p.value.length > 12){
r = false;
document.getElementById("passmsg").innerHTML = "请输入6~12位的密码";
p.className = "error_input";
}else{
document.getElementById("passmsg").innerHTML = "";
p.className = "";
}
//如果密码不一致
if(p.value != p2.value){
r = false;
document.getElementById("passmsg2").innerHTML = "密码不一致";
p2.className = "error_input";
}else{
document.getElementById("passmsg2").innerHTML = "";
p2.className = "";
}
//获取需要检验的一组checkbox
var colors = document.getElementsByName("colors");//获取checkbox的数组
var c = 0;//标示选择了几项
//循环数组，判断是否有至少一项的checked是为true的
for(var i = 0;i < colors.length;i++){
if(colors[i].checked == true){
c++;
break;
}
}
//如果一项都没选中
if(c == 0){
r = false;
document.getElementById("colorsmsg").innerHTML = "请选择您喜欢的颜色";
}else{
document.getElementById("colorsmsg").innerHTML = "";
}
return r;
}
</script>
<h1>欢迎注册</h1>
<form action="a.jsp" method="post" name="regform">
<p>
用户名：<input type="text" name="username"/>
<span id="namemsg" class="error"></span>
</p>
<p>
密码：<input type="password" name="password"/>
<span id="passmsg" class="error"></span>
</p>
<p>
确认密码：<input type="password" name="password2"/>
<span id="passmsg2" class="error"></span>
</p>
<p>
颜色：
<input type="checkbox" name="colors" value="A"/>A、红色
<input type="checkbox" name="colors" value="B"/>B、蓝色
<input type="checkbox" name="colors" value="C"/>C、紫色
<input type="checkbox" name="colors" value="D"/>D、绿色
<span id="colorsmsg" class="error"></span>
</p>
<p>
<input type="submit" value="提交" onclick="return check()"/>
<input type="reset" value="重置"/>
</p>
</form>
5、正则表达式校验
<style type="text/css">
body{
font-family:'微软雅黑';
}
h1{
font-size:24px;
text-align:center;
}
.error{
color:#F00;
}
/* 不满足要求的输入框的样式 */
.error_input{
background-color:pink;
border:1px solid #F00;
}
</style>
<script type="text/javascript">
//检验表达内容是否满足要求
function check(){
var r = true;
//获取元素：document.表单名.控件名
var u = document.regform.username;//必须是字母数字下划线，必填
var a = document.regform.age;//必须是数字，但可以不填
var f = document.regform.favor;//必填
//必须是字母数字下划线
var reg_name = /^[A-Za-z0-9_]+$/;//数字字母下划线
var reg_age = /^[0-9]*$/;//数字出现0次或多次
var reg_null = /^[ ]+$/;//空格出现1次或多次
//判断用户名是否满足
if(reg_name.test(u.value) == false){
r = false;
document.getElementById("namemsg").innerHTML = "用户名只能由字母、数字、下划线组成";
u.className = "error_input";
}else{
document.getElementById("namemsg").innerHTML = "";
u.className = "";
}
//判断年龄是否满足要求
if(reg_age.test(a.value) == false){
r = false;
document.getElementById("agemsg").innerHTML = "请输入数字";
a.className = "error_input";
}else{
document.getElementById("agemsg").innerHTML = "";
a.className = "";
}
//判断爱好是否满足
if(f.value == "" || reg_null.test(f.value)){
r = false;
document.getElementById("favormsg").innerHTML = "爱好不能为空";
f.className = "error_input";
}else{
document.getElementById("favormsg").innerHTML = "";
f.className = "";
}
return r;
}
</script>
<h1>欢迎注册</h1>
<form action="a.jsp" method="post" name="regform">
<p>
用户名：<input type="text" name="username"/>
<span id="namemsg" class="error"></span>
</p>
<p>
年龄：<input type="text" name="age"/>
<span id="agemsg" class="error"></span>
</p>
<p>
爱好：<input type="text" name="favor"/>
<span id="favormsg" class="error"></span>
</p>
<p>
<input type="submit" value="提交" onclick="return check()"/>
<input type="reset" value="重置"/>
</p>
</form>
 | 室内设计就业前景分析 | [2014-11-9] |
| 【常州电脑培训】做好seo的九大要点 | [2014-4-4] |
| 【常州网络营销培训】网络营销定位是灵魂 | [2014-4-2] |
| 网页中的表格布局【常州电脑培训】 | [2013-6-18] |
| Android中的提示信息—常州电脑培训 | [2012-6-21] |
| Java素数判断——常州Java培训 | [2012-6-20] |
| 【常州电脑培训】Java面向对象进阶 | [2012-6-7] |
| 外贸市场的next主流-----整合营销 | [2012-4-17] |
