验证码和表达式javascript小例子 -

yxl276
浏览: 10000 次
性别:
来自: 北京
最近访客更多访客>>

lk15080704155
billion000
18401674186
Vurtil
博主相关

博客
微博
相册
留言
关于我
文章分类

全部博客 (5)
社区版块

存档分类

验证码和表达式javascript小例子

正则表达式 JavaScript IE 浏览器 CSS
## 只可能输入数字 

<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">



##   只可能输入汉字 ##

<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">



##   只可能输入英文同数字 ##

<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

几个经常用到的正则表达式+JS

字符类
1.1 判断字符全部由a-Z或者是A-Z的字字母组成
<input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">
1.2 判断字符由字母和数字组成。
<input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')">
1.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
/^([a-zA-z_]{1})([\w]*)$/g.test(str)
1.4 字符串替换函数.Replace();

*************************************************************************
浏览器类
1 判断浏览器的类型
window.navigator.appName
2 判断ie的版本
window.navigator.appVersion
3 判断客户端的分辨率
window.screen.height; window.screen.width;

*************************************************************************
email的判断。
function ismail(mail)
{
return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
}

*************************************************************************

文本框焦点问题
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件

点击时文字消失，失去焦点时文字再出现

<input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if 
(value=='') {value='请输入用户名'}">

*************************************************************************

鼠标移入移出时颜色变化

<input type="submit" value="提交" name="B1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" class="button">

*************************************************************************

平面按钮

<input type=submit value=订阅 style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt; BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit">

*************************************************************************

使窗口变成指定的大小
<script>
window.resizeTo(300,283);
</script>

*************************************************************************

状态栏

<base onmouseover="window.status='测试' ;return true">

************************************************************************* 
点击文字也可以选中单选框

<br>
<input type="radio" name="regtype" value="A03" id="A03">
<label for="A03"> 点击我</label><br>

*************************************************************************

鼠标移动到文本框内自动选中全部

<input type="text" name="key" size="12" value="关键字" onFocus=this.select() onMouseOver=this.focus() class="line">

*************************************************************************

文字触发事件

<html>
<head>
<script language="LiveScript">
<!-- Hiding
   function hello() {
       alert("哈罗!");
   }
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

*************************************************************************

点击按钮更换页面背景色

<HTML>
<HEAD>
<TITLE>background.html</TITLE>
</HEAD>
<SCRIPT>
<!--

function bgChange(selObj) {
newColor = selObj.options[selObj.selectedIndex].text;
document.bgColor = newColor;
selObj.selectedIndex = -1;
}

//-->
</SCRIPT>
<BODY STYLE="font-family:Arial">
<B>Changing Background Colors</B>
<BR>
<FORM>
<SELECT SIZE="8" onChange="bgChange(this);">
<OPTION>Red
<OPTION>Orange
<OPTION>Yellow
<OPTION>Green
<OPTION>Blue
<OPTION>Indigo
<OPTION>Violet
<OPTION>White
<OPTION>pink
</SELECT>
</FORM>
</BODY>
</HTML>
*************************************************************************

鼠标移动到按钮时按钮改变

<style type="text/CSS">
<!--
.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF 

#CCCCCC #CCCCCC #CCCCFF}
.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin; 

border-color: #CCFF99 #999999 #999999 #CCFF99}
-->
</style> 
　　本例按钮的代码如下：
<input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'" 

onmouseout="this.className='style1'" class="style1"> 
*************************************************************************

将页面加入favorite中
<script language=javascript> 
<!-- 
function Addme(){ 
url = "http://your.site.address"; //你自己的主页地址 
title = "Your Site Name"; //你自己的主页名称 
window.external.AddFavorite(url,title); 
--> 
</script>

*************************************************************************

网页按钮开关****

<SCRIPT LANGUAGE="JavaScript">
function haha()
{
for(var i=0;i<document.form1.elements.length;i++)
{
if(document.form1.elements.all!=-1)
document.form1.elements.disabled=!document.form1.elements.disabled;
}
}
</SCRIPT>
<BODY><INPUT TYPE="button" NAME="aa " value=开关 onclick=haha()>
点这个下面就失效了</p>
<form name=form1>
    <INPUT TYPE="button" NAME="bb " value=1>
    <INPUT TYPE="button" NAME="bb " value=2>
    </p>
<p>
    <label>
    <input name="text" type="text" id="text" />
    </label>
</p>
</form>
</BODY>

*************************************************************************

双击滚屏

<SCRIPT LANGUAGE="JavaScript">
var currentpos,timer; 
function initialize() 
{ 
timer=setInterval("scrollwindow()",1);
} 
function sc()
{
clearInterval(timer);
}
function scrollwindow() 
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop) 
sc();
} 
document.onmousedown=sc
document.ondblclick=initialize
</SCRIPT>

*************************************************************************

JS实时显示时间

<form id="form1" name="form1" method="post" action="">
<label>
<input name="txtclock" type="text" id="txtclock" size="50" />
</label>
</form>
<SCRIPT LANGUAGE="JavaScript">
var clock_id;
window.onload=function()
{
clock_id=setInterval("document.form1.txtclock.value=(new Date);",1000)
}
</SCRIPT>

*************************************************************************

直线输入框

<INPUT name=Password size=10 type=password style="border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-style: solid; border-bottom-width: 1; background-color: #ffffff">

*************************************************************************

弹出窗口
方法一：<body onload="openwen()"> 浏览器读页面时弹出窗口； 
方法二：<body onunload="openwen()"> 浏览器离开页面时弹出窗口； 
方法三：用一个连接调用：<a href="#" onclick="openwin()">打开一个窗口</a> 
注意：使用的"#"是虚连接。 
方法四：用一个按钮调用：<input type="button" onclick="openwin()" value="打开窗口"> 

*************************************************************************

设置为主页
function makeHome(){
netscape.security.PrivilegeManager.enablePrivilege("UniversalPreferencesWrite");
navigator.preference("browser.startup.homepage", location.href);
}//

设置为收藏
function addFav(){
if(ie)
    window.external.AddFavorite(location.href,'WWW.OGRISH.COM : GROTESQUE MOVIES AND PICTURES');
if(ns)
    alert("Thanks for the bookmark!\n\nNetscape users click OK then press CTRL-D");
}//

*************************************************************************

屏蔽汉字和空格
<input name="txt"><input type="submit" onClick="alert(!/[^ -}]|\s/.test(txt.value))">

*************************************************************************

下拉框分组

<SELECT>
<OPTGROUP LABEL="碱性金属">
<OPTION>锂 (Li)</OPTION>
<OPTION>纳 (Na)</OPTION>
<OPTION>钾 (K)</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="卤素">
<OPTION>氟 (F)</OPTION>
<OPTION>氯 (Cl)</OPTION>
<OPTION>溴 (Br)</OPTION>
</OPTGROUP>
</SELECT>
分享到：