简单验证:<form name="myform">用户名:<input type="text" name="username" id="username"/><br />密码:<input type="password" name="password" id="password" /><br /><button οnclick="javascript:return checkLogin()">登陆</button><form>
<script type="text/javascript">function checkLogin(){ var username=document.getElementById("username").value; var password=document.getElementById("password").value; if(username==null||username==""){ alert("用户名不能为空!"); return false; } if(password==""||password==null){ alert("密码不能为空!"); return false; } if(username=="admin"&&password=="112233"){ alert("登陆成功!"); return true; } alert("用户名或密码有误!"); return false;}</script>
获取表单的值:<form name="myform">请输入姓名:<input type="text" name="username" value="请输入您的姓名" οnfοcus="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 οnclick="javascript:register()">注册</button><input type="reset" value="重置"/><form>
<script type="text/javascript">function register(){ var username=document.myform.username.value; var sex; var like=""; if(!document.myform.sex[0].checked){ sex=document.myform.sex[1].value; }else{ sex=document.myform.sex[0].value; } if(document.myform.chat.checked){ like+=document.myform.chat.value+"、"; } if(document.myform.online.checked){ like+=document.myform.online.value+"、"; } if(document.myform.football.checked){ like+=document.myform.football.value; } alert("姓名:"+username+" ,性别:"+sex+" ,爱好:"+like);}function clearText(){ document.myform.username.value=""; }</script>
以上是笨办法我们可以把checkbox框的name全改成like-->然后:
<script type="text/javascript">function register(){ var username=document.myform.username.value; var sex; var like=""; if(!document.myform.sex[0].checked){ sex=document.myform.sex[1].value; }else{ sex=document.myform.sex[0].value; } var like=document.myform.like;//这里获取的是数组 var likeValue=""; for(var i=0;i<like.length;i++){ if(like[i].checked){ likeValue+=like[i].value+"、"; } } alert("姓名:"+username+"\n性别:"+sex+"\n爱好:"+likeValue); //获得数组对象方式一 //var like=document.myform.like; //获得数组对象方式方式二 //var like=document.getElementsByName("like"); //获得数组对象方式三 //var like=document.getElementsByTagName("input"); /*for(var i=0;i<like.length;i++){ if(like[i].type=="checkbox"){ //boolValue该变量为传递进来的参数是bool类型,全选/反选两按钮时用. like[i].checked=boolValue; } }*/ }
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 οnclick="javascript:checkLeap()">提交</button></form>
获得焦点和失去焦点:<form name="myform"><input type="text" id="username" value="请输入姓名" οnblur="javascript:checkTextIsNull()" οnfοcus="javascript:selectTextValue()"/><form>
<script type="text/javascript">var username=document.getElementById("username");username.focus();function selectTextValue(){ //onfocus:获得焦点 document.getElementById("username").select();}function checkTextIsNull(){ //onblur失去焦点 if(username.value==""||username.value==null){ alert("用户名不能为空!"); username.focus(); }}</script>
全选,返选:<form name="myform"><input type="checkbox" name="chat" value="聊天" />聊天<input type="checkbox" name="online" value="上网" />上网<input type="checkbox" name="football" value="足球" />足球<br /><a href="#" οnclick="javascript:isSelect(true);">全选</a><a href="#" οnclick="javascript:isSelect(false);">反选</a><form>
<script type="text/javascript">function isSelect(boolValue){ var like=document.getElementsByTagName("input"); for(var i=0;i<like.length;i++){ if(like[i].type=="checkbox"){ like[i].checked=boolValue; } }}</script>
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 οnclick="javascript:transition();">跳转</button></form>
<script type="text/javascript">function transition(){ var sel=document.myform.sel;//因为是多选框,所以这里得到的是数组 for(var i=0;i<sel.length;i++){ if(sel[i].selected){ alert("11"); window.open(sel[i].value); } }}</script>
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 οnclick="javascript:transition();">跳转</button></form>
<script type="text/javascript">function transition(){ document.myform.action=document.getElementById("sel").value; //表单提交 document.myform.submit();}</script>
change事件跳转:<form name="myform"><select name="sel" οnchange="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>
<script type="text/javascript">function transition(){ var links=document.getElementById("sel").value; if(links!="psel"){ window.location.href=links; }}</script>
javascript操作css:<form name="myform"><button οnclick="javascript:changeColor();">变色</button><button οnclick="javascript:hidden();">隐藏</button><button οnclick="javascript:present();">呈现</button><button οnclick="javascript:test1();test2();">调用两函数</button></form>
<script type="text/javascript">function changeColor(){ document.getElementById("tt").style.color="#00ffff";}
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" οnclick="javascript:Hidden();" /></span></td> <td width="238"> </td> </tr></table>
<script type="text/javascript">function Hidden(){ document.getElementById("menu").style.display="none"; document.getElementById("imgHinddenAndPresent").innerHTML="<img src=\"toright.gif\" οnclick=\"javascript:Present();\" />";}
function Present(){ document.getElementById("menu").style.display=""; document.getElementById("imgHinddenAndPresent").innerHTML="<img src=\"toleft.gif\" οnclick=\"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;//否则弹出falsevar 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/gvar str="abbd addb ac abc acb";alert(str.match(reg));*/
/*var reg=/ab+c/gvar 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:truealert(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 οnclick="javascript:check();">验证</button></form></body>
示例6://验证qq号码:(必须在5位数字以上!)var reg=/^\d{5,}$/g;var str="1111";var str1="22222";alert(reg.test(str)); //output: truealert(reg.test(str1)); //output: false
