javascript简单示例集合

jhlovett

浏览: 614176 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

JavaScript 正则表达式 Windows QQ 百度

简单验证:
<form name="myform">
用户名:<input type="text" name="username" id="username"/><br />
密码:<input type="password" name="password" id="password" /><br />
<button onclick="javascript:return checkLogin()">登陆</button>
<form>

获取表单的值:
<form name="myform">
请输入姓名:<input type="text" name="username" value="请输入您的姓名" onfocus="javascript:clearText()"/><br />
性别:<input type="radio" checked="checked" value="男" name="sex"/>男
<input type="radio" value="女" name="sex" />女
<br />
爱好:<input type="checkbox" value="聊天" name="chat" />聊天
<input type="checkbox" value="上网" name="online" />上网
<input type="checkbox" value="足球" name="football"/>足球
<br />
<button onclick="javascript:register()">注册</button>
<input type="reset" value="重置"/>
<form>

以上是笨办法我们可以把checkbox框的name全改成like-->然后:

function clearText(){
document.myform.username.value="";
}
</script>

计算闰年: //if((year % 400 == 0)||(year % 4 == 0)&&(year % 100 != 0))
<script type="text/javascript">
function checkLeap(){
var year=document.getElementById("year").value;
if(year==null||year==""){
  alert("请输入年份!");
  return;
}
if((year%4==0&&year%100!=0)||(year%400==0&&year%100==0)){
  alert(year+"是闰年!");
}else{
  alert(year+"是平年!");
}
}
</script>

<form name="myform">
请输入年份:<input type="text" id="year" name="year"/>
<button onclick="javascript:checkLeap()">提交</button>
</form>

获得焦点和失去焦点:
<form name="myform">
<input type="text" id="username" value="请输入姓名" onblur="javascript:checkTextIsNull()"
onfocus="javascript:selectTextValue()"/>
<form>

全选,返选:
<form name="myform">
<input type="checkbox" name="chat" value="聊天" />聊天
<input type="checkbox" name="online" value="上网" />上网
<input type="checkbox" name="football" value="足球" />足球
<br />
<a href="#" onclick="javascript:isSelect(true);">全选</a>
<a href="#" onclick="javascript:isSelect(false);">反选</a>
<form>

select多选跳转:
<form name="myform">
<select name="sel" size="5" multiple="multiple">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.cn">谷歌</option>
<option value="http://www.163.com">163</option>
</select>
<button onclick="javascript:transition();">跳转</button>
</form>

select单选跳转:
<form name="myform">
<select name="sel">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.126.com">126</option>
<option value="http://www.163.com">163</option>
</select>
<button onclick="javascript:transition();">跳转</button>
</form>

change事件跳转:
<form name="myform">
<select name="sel" onchange="javascript:transition()">
<option value="http://www.qq.com">QQ</option>
<option value="http://www.126.com">126</option>
<option value="http://www.163.com">163</option>
<option selected="selected" value="psel">请选择</option>
</select>
</form>

javascript操作css:
<form name="myform">
<button onclick="javascript:changeColor();">变色</button>
<button onclick="javascript:hidden();">隐藏</button>
<button onclick="javascript:present();">呈现</button>
<button onclick="javascript:test1();test2();">调用两函数</button>
</form>

function hidden(){
document.getElementById("tt").style.display="none";
}

function present(){
document.getElementById("tt").style.display="block";
//设置display="";也可呈现.
//document.getElementById("tt").style.display="";
}

function test1(){
alert("调用事件时只要加\";\"号就可以同时调用多个函数哦!!!");
}

function test2(){
alert("调用事件时只要加\";\"号就可以同时调用多个函数哦!!!");
}
</script>

javascript分栏模式:
<table width="483" height="419" border="1">
<tr>
    <td width="215" align="center" id="menu">
    <p><a href="#">栏目1</a></p>
    <p><a href="#">栏目2</a></p>
    <p><a href="#">栏目3</a></p>
    <p><a href="#">栏目4</a></p>
    <p><a href="#">栏目5</a></p>
    <p><a href="#">栏目6</a></p>
    <p><a href="#">栏目7</a></p>
    <p><a href="#">栏目8</a></p></td>
    <td width="7"><span id="imgHinddenAndPresent"><img src="toleft.gif" onclick="javascript:Hidden();" /></span></td>
    <td width="238"> </td>
</tr>
</table>

function Present(){
document.getElementById("menu").style.display="";
document.getElementById("imgHinddenAndPresent").innerHTML="<img src=\"toleft.gif\" onclick=\"javascript:Hidden();\" />";
}
</script>

Regular Expression简单示例:

示例1:
<script type="text/javascript">
var str="windows是一款非常优秀的操作系统,我喜欢windows!";
/*Javascript正则表达式写在双斜线"/ /"之间,
g代表global全局范围查找,如果没有g只替换第一个.*/
var regular=/windows/g; //创建正则表达式模式
var tmp=str.replace(regular,"linux");
alert(tmp);
</script>

示例2:
<script type="text/javascript">
var str="Windows是一款非常优秀的操作系统,我喜欢Windows!";
//这里加上了一个i,"i"代表不区分(忽略)大小写,如果去掉i就无法匹配了.
var regular=/WINDOWS/gi;
var tmp=str.replace(regular,"linux");
alert(tmp);
</script>

示例3:
<script type="text/javascript">
var str="Windows是一款非常优秀的操作系统,我喜欢Windows!";
//这里加上了一个i,"i"代表不区分(忽略)大小写,如果去掉i就无法匹配了.
var regular=/WINDOWS/gi;
/*match方法:使用正则表达式模式,对字符串执行查找,并将包含查找的结果
作为数组返回*/
var tmp=str.match(regular);
for(var i=0;i<tmp.length;i++){
alert(tmp[i]);
}
</script>

示例4:
//以XXX开头 ^
/*var reg=/^中/g; //正则表达式模式设置以'中'开头.
var str="中国万岁,我爱中国!";
var found=str.match(reg);
alert(found);
str=str.replace(reg,"宗");
alert(str);*/

/*以XXX结尾 $
var reg=/t$/g;
var str="got got got";
//替换结尾的t为'xx'
str=str.replace(reg,"xx");
alert(str);*/

//表示任意一个字符 .

//匹配'想.想'的字符串
/*var reg=/想.想/g;
//得到和'想.想'匹配的字符串.
var str="想想想, 想一想,想太多想不想.";
str=str.match(reg);
alert(str);*/

//字边界 \b
/*var reg=/\bor/g;
var str="origami";
alert(str.replace(reg,"xx"));
var str1="gaormaor";
var reg1=/or\b/g;
alert(str1.replace(reg1,"xx"));*/

//非字边界
/*var reg=/\Bor/g;
var str="maortt";
alert(str.replace(reg,"xx"));*/
/*var reg1=/or\B/g;
var str="ttorma";
var str1="origami";
alert(str.replace(reg1,"xx"));
alert(str1.replace(reg1,"xx"));*/
/*var reg=/\Bor\B/;
var str="normal";
alert(str.replace(reg,"xx"));*/

//匹配除换行以外的任意字符 ...
/*var reg=/.../g;
str="ABC";
str1="\ntt";
alert(str.replace(reg,"ttt"));
alert(str1.replace(reg,"ttt"));*/

/*字符集 [...] -->多选一被[]
括起来的内容可以任意选一个*/
/*var reg=/[an]bc/gi;
str="ABCDEFG ABCDE NBCDDDFG";
alert(str.match(reg));
*/

//数字 \d
//匹配以三个数字开头,以三个数字结尾
/*var reg=/^\d\d\d$/g;
str="123";
alert(str.match(reg));*/

//正则表达式对象的一个方法:test()
/*var reg=/^\d\d\d$/g;
var str="123";
//如果符合正则表达式定义将弹出true;
//否则弹出false
var t=reg.test(str);
if(t){
alert("验证通过!");
}else{
alert("验证未通过!");
}
*/

/*规定只能输入的6位数字,以6位数字开头
,以6位数字结尾,{}限定输入的位数*/
/*var reg=/^\d{6}$/g;
var str="112233";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/

/*验证qq密码,{6,18}代表只能是数字
并且在6-18位之间*/
/*var reg=/^\d{6,18}$/g;
var str="111111111";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/

/*验证必须以3个以上,数字,下划线,字母开头
和结尾
*/
/*var reg=/^\w{3,}$/g;
var str="839237384783";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/

//[^...] 非字符集-->不能括起来的内容之一
/*var reg=/a[^eg-]/g;
var str="ab ac aa ae ag a- at";
alert(str.match(reg));*/

/*
? 相当于匹配0-1个,可以理解成:{0,1},
+ 相当于匹配一至多个,可以理解{1,},
* 相当于匹配零至多个,可以理解{0,},
\d{6} 规定只能输入6位数字
\d{15,18} 规定只能输入15-18个数字
\w{3,} 规定至少有3个字母或下划线或数字以上
() 代表分组
*/

/*var reg=/ab?c/g
var str="abbd addb ac abc acb";
alert(str.match(reg));
*/

/*var reg=/ab+c/g
var str="abbd addb ac abc acb";
alert(str.match(reg));*/

/*var reg=/ab*c/g;
var str="accd abbbd addbc abbc acbbd abc";
alert(str.match(reg));*/

// | 选择符
//相当于匹配got或get
/*var reg=/got|get/g;
var str="gggt gtoo gto got gpj get";
window.alert(str.match(reg));*/

//验证国内的电话号码
/*var reg=/\d{3}-\d{8}|\d{4}-\d{7}/;
var str="0579-11223322";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/

//匹配特殊字符如: \. \/
/*var reg=/\./g;
var str="a.a.a.c";
alert(str.match(reg));*/

/*var reg=/\//g;
var str="a/a/a/c";
alert(str.match(reg));*/

//验证考试成绩:(匹配数字可以有小数点)
var reg=/^\d+(\.\d+)?$/g;
var str="98";
var str2="98.a";
alert(reg.test(str));//output:true
alert(reg.test(str2));//output:false;

示例5:
为空验证,验证是否中文,清除前后空格:
<script type="text/javascript">
function check(){
  var username=document.myform.username.value;
  /*这种方式验证表单的弊端,
  如果用户在文本框上输入空格,
  也能通过验证,我们可以通过正则表达式来解决*/
  if(username==""||username==null){
   alert("用户名不能为空!");
   return;
  }

  //正则表达式中是可以输入空格的如:/ +/g,但是确切的写法应该是/\s+/g
  /*该示例中在正则表达式模式中
  输入'空格+' 代表匹配
  1-n个空格*/
  /*var reg=/\s+/g;
  if(reg.test(username)){
   alert("不能输入一连串的空格!");
   return;
  }*/

  //以上做法输入任意字符只要有空格就会验证不通过
  /*假设在文本框中输入用户名
    的前后加空格就不能通过验证,如果
    允许在用户名前后加空格则可以:
    /^ +$/g 以一个或者多个空格开头
    和以一个或者多个空格结尾,这样做匹配了
    输入的所有字符必须是空格.从而解决了以上
    的验证问题.
  */
  var reg=/^\s+$/g;
  if(reg.test(username)){
   alert("不能输入一连串的空格!");
   return;
  }

  //验证输入的是否是否是中文:
  var reg=/^[\u4e00-\u9fa5]+$/g;
  if(!reg.test(username)){
   alert('姓名必须是中文!!!');
   return;
  }

  //这里在末尾加上$的目的是为了方便查看结尾是否有空格
  alert("验证通过\n你输入的是:"+trim(username)+"$");
}

//去除空格
function trim(str){
//去除起始位置一个以上的空格及结尾位置一个以上的空格
return str.replace(/(^\s+)|(\s+$)/g,"");
}

</script>
</head>
<body>
<form name="myform">
姓名:<input type="text" name="username"/>
<button onclick="javascript:check();">验证</button>
</form>
</body>

示例6:
//验证qq号码:(必须在5位数字以上!)
var reg=/^\d{5,}$/g;
var str="1111";
var str1="22222";
alert(reg.test(str)); //output: true
alert(reg.test(str1)); //output: false