简单验证:
<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;
//否则弹出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 ο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: true
alert(reg.test(str1)); //output: false