JavaScript常用表单验证

目录:
1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 
2.:js判断汉字、判断是否汉字 、只能输入汉字
3:js判断是否输入英文、只能输入英文
4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
5:只能输入英文字符和数字
6: js email验证 、js 判断email 、信箱/邮箱格式验证
7:js字符过滤,屏蔽关键字
8:js密码验证、判断密码 
2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空 
2.2:比较两个表单项的值是否相同
2.3:表单只能为数字和”_”,
2.4:表单项输入数值/长度限定
2.5:中文/英文/数字/邮件地址合法性判断
2.6:限定表单项不能输入的字符
2.7表单的自符控制
2.8:form文本域的通用校验函数

1. 长度限制
<script>
function test() 
{
if(document.a.b.value.length>50)
{
alert(“不能超过50个字符!”);
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit=”return test()”>
<textarea name=”b” cols=”40″ wrap=”VIRTUAL” rows=”6″></textarea>
<input type=”submit” name=”Submit” value=”check”>
</form> 

2. 只能是汉字 
<input onkeyup=”value=”/oblog/value.replace(/[^u4E00-u9FA5]/g,”)”>

3.” 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>

<input onkeydown=”onlyEng();”>

4. 只能是数字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false;
}
</script>

<input onkeydown=”onlyNum();”>

5. 只能是英文字符和数字
<input onkeyup=”value=”/oblog/value.replace(/[W]/g,””) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^d]/g,”))”>

6. 验证油箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/) != -1)
return true;
else
alert(“oh”);
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>

7. 屏蔽关键字(这里屏蔽***和****)
<script language=”javascript1.2″>
function test() {
if((a.b.value.indexOf (“***”) == 0)||(a.b.value.indexOf (“****”) == 0)){
alert(“:)”);
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit=”return test()”>
<input type=text name=b>
<input type=”submit” name=”Submit” value=”check”>
</form>

8. 两次输入密码是否相同
<FORM METHOD=POST ACTION=””>
<input type=”password” id=”input1″>
<input type=”password” id=”input2″>
<input type=”button” value=”test” onclick=”check()”>
</FORM>
<script>
function check()

with(document.all){
if(input1.value!=input2.value)
{
alert(“false”)
input1.value = “”;
input2.value = “”;
}
else document.forms[0].submit();
}
}
</script>
够了吧 🙂
屏蔽右键 很酷 
oncontextmenu=”return false” ondragstart=”return false” onselectstart=”return false”
加在body中




2.1 表单项不能为空

<script language=”javascript”>
<!–
function CheckForm()

if (document.form.name.value.length == 0) { 
alert(“请输入您姓名!”);
document.form.name.focus();
return false;
}
return true;
}
–>
</script>

2.2 比较两个表单项的值是否相同

<script language=”javascript”>
<!–
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) { 
alert(“您两次输入的密码不一样!请重新输入.”);
document.ADDUser.PWD.focus();
return false;
}
return true;
}
–>
</script>

2.3 表单项只能为数字和”_”,用于电话/银行帐号验证上,可扩展到域名注册等

<script language=”javascript”>
<!–
function isNumber(String)

var Letters = “1234567890-“; //可以自己增加可输入值
var i;
var c;
if(String.charAt( 0 )==’-‘)
return false;
if( String.charAt( String.length – 1 ) == ‘-‘ )
return false;
for( i = 0; i < String.length; i ++ )

c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()

if(! isNumber(document.form.TEL.value)) { 
alert(“您的电话号码不合法!”);
document.form.TEL.focus();
return false;
}
return true;
}
–>
</script>


2.4 表单项输入数值/长度限定

<script language=”javascript”>
<!–
function CheckForm() 

if (document.form.count.value > 100 || document.form.count.value < 1)

alert(“输入数值不能小于零大于100!”);
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)

alert(“输入文字小于10!”);
document.form.MESSAGE.focus();
return false;
}
return true;
}
//–>
</script>

2.5 中文/英文/数字/邮件地址合法性判断

<SCRIPT LANGUAGE=”javascript”>
<!–

function isEnglish(name) //英文值检测

if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) { 
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}

function isChinese(name) //中文值检测

if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) { 
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}

function isMail(name) // E-mail值检测

if(! isEnglish(name))
return false;
i = name.indexOf(” at “);
j = name dot lastIndexOf(” at “);
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}

function isNumber(name) //数值检测

if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) { 
if(name.charAt(i) < “0” || name.charAt(i) > “9”)
return false;
}
return true;
}

function CheckForm()

if(! isMail(form.Email.value)) { 
alert(“您的电子邮件不合法!”);
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) { 
alert(“英文名不合法!”);
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) { 
alert(“中文名不合法!”);
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) { 
alert(“邮政编码不合法!”);
form.PublicZipCode.focus();
return false;
}
return true;
}
//–>
</SCRIPT>

2.6 限定表单项不能输入的字符

<script language=”javascript”>
<!–

function contain(str,charset)// 字符串包含测试函数

var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}

function CheckForm()

if ((contain(document.form.NAME.value, “%()><“)) || (contain(document.form.MESSAGE.value, “%()><“)))

alert(“输入了非法字符”);
document.form.NAME.focus();
return false;
}
return true;
}
//–>
</script> 

1. 检查一段字符串是否全由数字组成 
————————————— 
<script language=”Javascript”><!– 
function checkNum(str){return str.match(/D/)==null} 
alert(checkNum(“1232142141”)) 
alert(checkNum(“123214214a1”)) 
// –></script> 

2. 怎么判断是否是字符 
————————————— 
if (/[^x00-xff]/g.test(s)) alert(“含有汉字”); 
else alert(“全是字符”); 

3. 怎么判断是否含有汉字 
————————————— 
if (escape(str).indexOf(“%u”)!=-1) alert(“含有汉字”); 
else alert(“全是字符”); 

4. 邮箱格式验证 
————————————— 
//函数名:chkemail 
//功能介绍:检查是否为Email Address 
//参数说明:要检查的字符串 
//返回值:0:不是 1:是 
function chkemail(a) 
{ var i=a.length; 
var temp = a.indexOf(‘@’); 
var tempd = a.indexOf(‘.’); 
if (temp > 1) { 
if ((i-temp) > 3){ 
if ((i-tempd)>0){ 
return 1; 




return 0; 


5. 数字格式验证 
————————————— 
//函数名:fucCheckNUM 
//功能介绍:检查是否为数字 
//参数说明:要检查的数字 
//返回值:1为是数字,0为不是数字 
function fucCheckNUM(NUM) 

var i,j,strTemp; 
strTemp=”0123456789″; 
if ( NUM.length== 0) 
return 0 
for (i=0;i<NUM.length;i++) 

j=strTemp.indexOf(NUM.charAt(i)); 
if (j==-1) 

//说明有字符不是数字 
return 0; 


//说明是数字 
return 1; 


6. 电话号码格式验证 
————————————— 
//函数名:fucCheckTEL 
//功能介绍:检查是否为电话号码 
//参数说明:要检查的字符串 
//返回值:1为是合法,0为不合法 
function fucCheckTEL(TEL) 

var i,j,strTemp; 
strTemp=”0123456789-()# “; 
for (i=0;i<TEL.length;i++) 

j=strTemp.indexOf(TEL.charAt(i)); 
if (j==-1) 

//说明有字符不合法 
return 0; 


//说明合法 
return 1; 


7. 判断输入是否为中文的函数 
————————————— 
function ischinese(s){ 
var ret=true; 
for(var i=0;i<s.length;i++) 
ret=ret && (s.charCodeAt(i)>=10000); 
return ret; 


8. 综合的判断用户输入的合法性的函数 
————————————— 
<script language=”javascript”> 
//限制输入字符的位数开始 
//m是用户输入,n是要限制的位数 
function issmall(m,n) 

if ((m<n) && (m>0)) 

return(false); 

else 
{return(true);} 


9. 判断密码是否输入一致 
————————————— 
function issame(str1,str2) 

if (str1==str2) 
{return(true);} 
else 
{return(false);} 


10. 判断用户名是否为数字字母下滑线 
————————————— 
function notchinese(str){ 
var reg=/[^A-Za-z0-9_]/g 
if (reg.test(str)){ 
return (false); 
}else{ 
return(true); } 


2.8. form文本域的通用校验函数
————————————— 
作用:检测所有必须非空的input文本,比如姓名,账号,邮件地址等等。
该校验现在只针对文本域,如果要针对form里面的其他域对象,可以改变判断条件。

使用方法:在要检测的文本域中加入title文字。文字是在提示信息,你要提示给用户的该字段的中文名。比如要检测用户名
html如下<input name=”txt_1″ title=”姓名”>,当然,最好用可视化工具比如dreamweaver什么的来编辑域。
如果要检测数字类型数据的话,再把域的id统一为sz.
javascript判断日期类型比较麻烦,所以就没有做日期类型校验的程序了.高手可以补充。

程序比较草,只是提供一个思路。抛砖引玉! :)
哦,对了,函数调用方法:< form onsubmit=”return dovalidate()”>

function dovalidate()
{
fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件
for(i=0;i<fm.length;i++)

//检测判断条件,根据类型不同可以修改
if(fm[i].tagName.toUpperCase()==”INPUT” &&fm[i].type.toUpperCase()==”TEXT” && (fm[i].title!=””))

if(fm[i].value=”/blog/=””)//
{
str_warn1=fm[i].title+”不能为空!”;
alert(str_warn1);
fm[i].focus();
return false; 
}
if(fm[i].id.toUpperCase()==”SZ”)//数字校验
{
if(isNaN(fm[i].value))
{ str_warn2=fm[i].title+”格式不对”;
alert(str_warn2);
fm[i].focus();
return false;
}
}
}
return true;
}

只能是汉字<input onkeyup=”value=value.replace(/[^/u4E00-/u9FA5]/g,”)”>   只能是英文字母<script language=javascript> 
function onlyEng() 

if(!(event.keyCode>=65&&event.keyCode<=90)) 
    event.returnValue=false; 

</script> 

<input onkeydown=”onlyEng();”>   只能是数字 <script language=javascript> 
function onlyNum() 

if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105))) 
//考虑小键盘上的数字键 
    event.returnValue=false; 

</script> 

<input onkeydown=”onlyNum();”> 只能是英文字母和数字<SCRIPT LANGUAGE=Javascript RUNAT=Server> 
function isEmail(strEmail) { 
if (strEmail.search(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/) != -1) 
return true; 
else 
alert(“oh”); 

</SCRIPT> 
<input type=text onblur=isEmail(this.value)>   验证EMAIL格式<script language=”JavaScript1.2″> 
function test() { 
if((a.b.value.indexOf (“sex”) == 0)||(a.b.value.indexOf (“fuck”) == 0)){ 
    alert(“五讲四美三热爱”); 
    a.b.focus(); 
    return false;} 

</script> 
<form name=a onsubmit=”return test()”> 
<input type=text name=b> 
<input type=”submit” name=”Submit” value=”check”> 
</form>

posted @ 2008-03-21 14:23 重归本垒(Bing) 阅读(1505) | 评论 (0) | 编辑 收藏

struts2标签取值方式

取值要通过<s:property value=”” />或在任意的<s:/>标签内使用%{}; 

当Action的valueStack中有该属性的值时,只需直接使用该属性的名字即可; 

当Action的valueStack中没有该属性的值时,比如在session,application范围中的属性值时,需要加#或者#attr.; 

例子: 
假设某Action中有person成员变量,在application中存在company属性 
那么我们可以通过以下方法取值: 
<s:property value=”person.name” /> 
<s:property value=”#person.name” /> 
<s:property value=”company.name” /> //无法取到,因为company不在action的valueStack中 
<s:property value=”#company.name” /> 

<s:textfield name=”person.name” value=”person.name” /> //错误,value会直接显示person.name字样 
<s:textfield name=”person.name” value=”%{person.name}” /> 
<s:textfield name=”person.company.name” value=”%{#company.name}” /> 
<s:textfield name=”person.company.name” value=”%{#attr.company.name}” />

posted @ JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证

被 JavaScript 验证的这些典型的表单数据有:

用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):复制代码 代码如下:
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==””)
  {alert(alerttxt);return false}
else {return true}
}
}

E-mail验证(验证邮箱)

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:复制代码 代码如下:
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf(“@”)
dotpos=value.lastIndexOf(“.”)
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

实例:复制代码 代码如下:
<html>
<head>
<script type=”text/javascript”>
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf(“@”)
dotpos=value.lastIndexOf(“.”)
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,”Not a valid e-mail address!”)==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action=”submitpage.htm”onsubmit=”return validate_form(this);” method=”post”>
Email: <input type=”text” name=”email” size=”30″>
<input type=”submit” value=”Submit”> 
</form>
</body>

</html>

不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 
用途:校验ip地址的格式 
输入:strIP:ip地址 
返回:如果通过验证返回true,否则返回false; 

*/ 
function isIP(strIP) { 
if (isNull(strIP)) return false; 
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 
if(re.test(strIP)) 

if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;

return false; 


/* 
用途:检查输入字符串是否为空或者全部都是空格 
输入:str 
返回: 
如果全是空返回true,否则返回false 
*/ 
function isNull( str ){ 
if ( str == “” ) return true; 
var regu = “^[ ]+$”; 
var re = new RegExp(regu); 
return re.test(str); 


  
/* 
用途:检查输入对象的值是否符合整数格式 
输入:str 输入的字符串 
返回:如果通过验证返回true,否则返回false 

*/ 
function isInteger( str ){  
var regu = /^[-]{0,1}[0-9]{1,}$/; 
return regu.test(str); 


/* 
用途:检查输入手机号码是否正确 
输入: 
s:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function checkMobile( s ){   
var regu =/^[1][3][0-9]{9}$/; 
var re = new RegExp(regu); 
if (re.test(s)) { 
return true; 
}else{ 
return false; 



  
/* 
用途:检查输入字符串是否符合正整数格式 
输入: 
s:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function isNumber( s ){   
var regu = “^[0-9]+$”; 
var re = new RegExp(regu); 
if (s.search(re) != -1) { 
return true; 
} else { 
return false; 



/* 
用途:检查输入字符串是否是带小数的数字格式,可以是负数 
输入: 
s:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function isDecimal( str ){   
if(isInteger(str)) return true; 
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/; 
if (re.test(str)) { 
if(RegExp.$1==0&&RegExp.$2==0) return false; 
return true; 
} else { 
return false; 



/* 
用途:检查输入对象的值是否符合端口号格式 
输入:str 输入的字符串 
返回:如果通过验证返回true,否则返回false 

*/ 
function isPort( str ){  
return (isNumber(str) && str<65536); 


/* 
用途:检查输入对象的值是否符合E-Mail格式 
输入:str 输入的字符串 
返回:如果通过验证返回true,否则返回false 

*/ 
function isEmail( str ){  
var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/; 
if(myReg.test(str)) return true; 
return false; 


/* 
用途:检查输入字符串是否符合金额格式 
格式定义为带小数的正数,小数点后最多三位 
输入: 
s:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function isMoney( s ){   
var regu = “^[0-9]+[\.][0-9]{0,3}$”; 
var re = new RegExp(regu); 
if (re.test(s)) { 
return true; 
} else { 
return false; 


/* 
用途:检查输入字符串是否只由英文字母和数字和下划线组成 
输入: 
s:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function isNumberOr_Letter( s ){//判断是否是数字或字母 

var regu = “^[0-9a-zA-Z\_]+$”; 
var re = new RegExp(regu); 
if (re.test(s)) { 
return true; 
}else{ 
return false; 


/* 
用途:检查输入字符串是否只由英文字母和数字组成 
输入: 
s:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function isNumberOrLetter( s ){//判断是否是数字或字母 

var regu = “^[0-9a-zA-Z]+$”; 
var re = new RegExp(regu); 
if (re.test(s)) { 
return true; 
}else{ 
return false; 


/* 
用途:检查输入字符串是否只由汉字、字母、数字组成 
输入: 
value:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function isChinaOrNumbOrLett( s ){//判断是否是汉字、字母、数字组成 

var regu = “^[0-9a-zA-Z\u4e00-\u9fa5]+$”;   
var re = new RegExp(regu); 
if (re.test(s)) { 
return true; 
}else{ 
return false; 



/* 
用途:判断是否是日期 
输入:date:日期;fmt:日期格式 
返回:如果通过验证返回true,否则返回false 
*/ 
function isDate( date, fmt ) { 
if (fmt==null) fmt=”yyyyMMdd”; 
var yIndex = fmt.indexOf(“yyyy”); 
if(yIndex==-1) return false; 
var year = date.substring(yIndex,yIndex+4); 
var mIndex = fmt.indexOf(“MM”); 
if(mIndex==-1) return false; 
var month = date.substring(mIndex,mIndex+2); 
var dIndex = fmt.indexOf(“dd”); 
if(dIndex==-1) return false; 
var day = date.substring(dIndex,dIndex+2); 
if(!isNumber(year)||year>”2100″ || year< “1900”) return false; 
if(!isNumber(month)||month>”12″ || month< “01”) return false; 
if(day>getMaxDay(year,month) || day< “01”) return false; 
return true; 


function getMaxDay(year,month) { 
if(month==4||month==6||month==9||month==11) 
return “30”; 
if(month==2) 
if(year%4==0&&year%100!=0 || year%400==0) 
return “29”; 
else 
return “28”; 
return “31”; 


/* 
用途:字符1是否以字符串2结束 
输入:str1:字符串;str2:被包含的字符串 
返回:如果通过验证返回true,否则返回false 

*/ 
function isLastMatch(str1,str2) 
{  
var index = str1.lastIndexOf(str2); 
if(str1.length==index+str2.length) return true; 
return false; 


  
/* 
用途:字符1是否以字符串2开始 
输入:str1:字符串;str2:被包含的字符串 
返回:如果通过验证返回true,否则返回false 

*/ 
function isFirstMatch(str1,str2) 
{  
var index = str1.indexOf(str2); 
if(index==0) return true; 
return false; 


/* 
用途:字符1是包含字符串2 
输入:str1:字符串;str2:被包含的字符串 
返回:如果通过验证返回true,否则返回false 

*/ 
function isMatch(str1,str2) 
{  
var index = str1.indexOf(str2); 
if(index==-1) return false; 
return true; 


  
/* 
用途:检查输入的起止日期是否正确,规则为两个日期的格式正确, 
且结束如期>=起始日期 
输入: 
startDate:起始日期,字符串 
endDate:结束如期,字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function checkTwoDate( startDate,endDate ) { 
if( !isDate(startDate) ) { 
alert(“起始日期不正确!”); 
return false; 
} else if( !isDate(endDate) ) { 
alert(“终止日期不正确!”); 
return false; 
} else if( startDate > endDate ) { 
alert(“起始日期不能大于终止日期!”); 
return false; 

return true; 


/* 
用途:检查输入的Email信箱格式是否正确 
输入: 
strEmail:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function checkEmail(strEmail) { 
//var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/; 
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; 
if( emailReg.test(strEmail) ){ 
return true; 
}else{ 
alert(“您输入的Email地址格式不正确!”); 
return false; 



/* 
用途:检查输入的电话号码格式是否正确 
输入: 
strPhone:字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function checkPhone( strPhone ) { 
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/; 
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/; 
var prompt = “您输入的电话号码不正确!” 
if( strPhone.length > 9 ) { 
if( phoneRegWithArea.test(strPhone) ){ 
return true; 
}else{ 
alert( prompt ); 
return false; 

}else{ 
if( phoneRegNoArea.test( strPhone ) ){ 
return true; 
}else{ 
alert( prompt ); 
return false; 


  



  
/* 
用途:检查复选框被选中的数目 
输入: 
checkboxID:字符串 
返回: 
返回该复选框中被选中的数目 

*/ 

function checkSelect( checkboxID ) { 
var check = 0; 
var i=0; 
if( document.all(checkboxID).length > 0 ) { 
for(  i=0; i<document.all(checkboxID).length; i++ ) { 
if( document.all(checkboxID).item( i ).checked  ) { 
check += 1; 


  

  

}else{ 
if( document.all(checkboxID).checked ) 
check = 1; 

return check; 


function getTotalBytes(varField) { 
if(varField == null) 
return -1; 

var totalCount = 0; 
for (i = 0; i< varField.value.length; i++) { 
if (varField.value.charCodeAt(i) > 127) 
totalCount += 2; 
else 
totalCount++ ; 

return totalCount; 


function getFirstSelectedValue( checkboxID ){ 
var value = null; 
var i=0; 
if( document.all(checkboxID).length > 0 ){ 
for(  i=0; i<document.all(checkboxID).length; i++ ){ 
if( document.all(checkboxID).item( i ).checked ){ 
value = document.all(checkboxID).item(i).value; 
break; 


} else { 
if( document.all(checkboxID).checked ) 
value = document.all(checkboxID).value; 

return value; 


  
function getFirstSelectedIndex( checkboxID ){ 
var value = -2; 
var i=0; 
if( document.all(checkboxID).length > 0 ){ 
for(  i=0; i<document.all(checkboxID).length; i++ ) { 
if( document.all(checkboxID).item( i ).checked  ) { 
value = i; 
break; 


} else { 
if( document.all(checkboxID).checked ) 
value = -1; 

return value; 


function selectAll( checkboxID,status ){ 

if( document.all(checkboxID) == null) 
return; 

if( document.all(checkboxID).length > 0 ){ 
for(  i=0; i<document.all(checkboxID).length; i++ ){ 

document.all(checkboxID).item( i ).checked = status; 

} else { 
document.all(checkboxID).checked = status; 



function selectInverse( checkboxID ) { 
if( document.all(checkboxID) == null) 
return; 

if( document.all(checkboxID).length > 0 ) { 
for(  i=0; i<document.all(checkboxID).length; i++ ) { 
document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;

} else { 
document.all(checkboxID).checked = !document.all(checkboxID).checked; 



function checkDate( value ) { 
if(value==”) return true; 
if(value.length!=8 || !isNumber(value)) return false;  
var year = value.substring(0,4); 
if(year>”2100″ || year< “1900”) 
return false; 

var month = value.substring(4,6); 
if(month>”12″ || month< “01”) return false; 

var day = value.substring(6,8); 
if(day>getMaxDay(year,month) || day< “01”) return false; 

return true;  


/* 
用途:检查输入的起止日期是否正确,规则为两个日期的格式正确或都为空 
且结束日期>=起始日期 
输入: 
startDate:起始日期,字符串 
endDate:  结束日期,字符串 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function checkPeriod( startDate,endDate ) { 
if( !checkDate(startDate) ) { 
alert(“起始日期不正确!”); 
return false; 
} else if( !checkDate(endDate) ) { 
alert(“终止日期不正确!”); 
return false; 
} else if( startDate > endDate ) { 
alert(“起始日期不能大于终止日期!”); 
return false; 

return true; 


/* 
用途:检查证券代码是否正确 
输入: 
secCode:证券代码 
返回: 
如果通过验证返回true,否则返回false 

*/ 
function checkSecCode( secCode ) { 
if( secCode.length !=6 ){ 
alert(“证券代码长度应该为6位”); 
return false; 


if(!isNumber( secCode ) ){ 
alert(“证券代码只能包含数字”); 

  
return false; 

return true; 


/**************************************************** 
function:cTrim(sInputString,iType) 
description:字符串去空格的函数 
parameters:iType:1=去掉字符串左边的空格 

2=去掉字符串左边的空格 
0=去掉字符串左边和右边的空格 
return value:去掉空格的字符串 
****************************************************/ 
function cTrim(sInputString,iType) 

var sTmpStr = ‘ ‘; 
var i = -1; 

if(iType == 0 || iType == 1) 

while(sTmpStr == ‘ ‘) 

++i; 
sTmpStr = sInputString.substr(i,1); 

sInputString = sInputString.substring(i); 


if(iType == 0 || iType == 2) 

sTmpStr = ‘ ‘; 
i = sInputString.length; 
while(sTmpStr == ‘ ‘) 

–i; 
sTmpStr = sInputString.substr(i,1); 

sInputString = sInputString.substring(0,i+1); 

return sInputString; 


JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证。(减轻服务器负荷)
JavaScript 表单验证:
被 JavaScript 验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目:
比如:下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题。

复制代码

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==””)
  {alert(alerttxt);return false}
else {return true}
}
}

复制代码

举一个完整的例子如下:

复制代码

<html>
<head>
<script type=”text/javascript”>
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value==””)
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,”Email must be filled out!”)==false)
    {email.focus();return false}
  }
}
</script>
</head>
<body>
<form action=”SubmitNews.html” onsubmit=”return validate_form(this)” method=”post”>
Email: <input type=”text” name=”email” size=”30″>
<input type=”submit” value=”Submit”> 
</form>
</body>
</html>

复制代码

E-mail 验证:
输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号。

复制代码

<html>
<head>
<script type=”text/javascript”>
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf(“@”)
dotpos=value.lastIndexOf(“.”)
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,”Not a valid e-mail address!”)==false)
  {email.focus();return false}
}
}
</script>
</head>
<body>
<form action=”submitpage.htm”onsubmit=”return validate_form(this);” method=”post”>
Email: <input type=”text” name=”email” size=”30″>
<input type=”submit” value=”Submit”> 
</form>
</body>
</html>

复制代码

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发.

1. 禁止右键点击

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

2. 隐藏搜索文本框文字

Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(document).ready(function() {
$("input.text1").val("Enter your search text here");
   textFill($('input.text1'));
});
    function textFill(input){ //input focus text function
  var originalvalue = input.val();
  input.focus( function(){
    if( $.trim(input.val()) == originalvalue ){ input.val(''); }
  });
  input.blur( function(){
    if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
  });
}

3. 在新窗口中打开链接

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() {
  //Example 1: Every link will open in a new window
  $('a[href^="http://"]').attr("target", "_blank");
  //Example 2: Links with the rel="external" attribute will only open in a new window
  $('a[@rel$='external']').click(function(){
    this.target = "_blank";
  });
});
// how to use
<a href="http://www.opensourcehunter.com" rel=external>open link</a>

4. 检测浏览器

注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
  // do something
}
// Target Safari
if( $.browser.safari ){
  // do something
}
// Target Chrome
if( $.browser.chrome){
  // do something
}
// Target Camino
if( $.browser.camino){
  // do something
}
// Target Opera
if( $.browser.opera){
  // do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
  // do something
}
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
  // do something
}
});

5. 预加载图片

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
  for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);
  }
}
// how to use
$.preloadImages("image1.jpg");
});

6. 页面样式切换

$(document).ready(function() {
  $("a.Styleswitcher").click(function() {
    //swicth the LINK REL attribute with the value in A REL attribute
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
  });
// how to use
// place this in your header
<LINK rel=stylesheet type=text/css href="default.css">
// the links
<A class=Styleswitcher href="#" rel=default.css>Default Theme</A>
<A class=Styleswitcher href="#" rel=red.css>Red Theme</A>
<A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>
});

7. 列高度相同

如果使用了两个CSS列,使用此种方式可以是两列的高度相同。

$(document).ready(function() {
function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}
// how to use
$(document).ready(function() {
  equalHeight($(".left"));
  equalHeight($(".right"));
});
});

8. 动态控制页面字体大小

用户可以改变页面字体大小

$(document).ready(function() {
  // Reset the font size(back to default)
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease the font size(smaller font)
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

9. 返回页面顶部功能

For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    return false;
   }
  }
  });
// how to use
// place this where you want to scroll to
<A name=top></A>
// the link
<A href="#top">go to top</A>
});

10. 获得鼠标指针XY值

Want to know where your mouse cursor is?

$(document).ready(function() {
   $().mousemove(function(e){
     //display the x and y axis values inside the div with the id XY
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
// how to use
<DIV id=XY></DIV>

});

11.返回顶部按钮

你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件。

// Back to top
$('a.top').click(function () {
  $(document.body).animate({scrollTop: 0}, 800);
  return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

改变 scrollTop 的值可以调整返回距离顶部的距离,而 animate 的第二个参数是执行返回动作需要的时间(单位:毫秒)。

12.预加载图片

如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover1.png', 'img/hover2.png');

13.检查图片是否加载完成

有时候你需要确保图片完成加载完成以便执行后面的操作:

$('img').load(function () {
  console.log('image load successful');
});

你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。

14.自动修改破损图像

如果你碰巧在你的网站上发现了破碎的图像链接,你可以用一个不易被替换的图像来代替它们。添加这个简单的代码可以节省很多麻烦:

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});

即使你的网站没有破碎的图像链接,添加这段代码也没有任何害处。

15.鼠标悬停(hover)切换 class 属性

假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class 属性:

$('.btn').hover(function () {
  $(this).addClass('hover');
  }, function () {
    $(this).removeClass('hover');
  });

你只需要添加必要的CSS代码即可。如果你想要更简洁的代码,可以使用 toggleClass 方法:

$('.btn').hover(function () { 
  $(this).toggleClass('hover'); 
});

注:直接使用CSS实现该效果可能是更好的解决方案,但你仍然有必要知道该方法。

16.禁用 input 字段

有时你可能需要禁用表单的 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。可以添加 disabled 属性,直到你想启用它时:

$('input[type="submit"]').prop('disabled', true);

你要做的就是执行 removeAttr 方法,并把要移除的属性作为参数传入:

$('input[type="submit"]').removeAttr('disabled');

17.阻止链接加载

有时你不希望链接到某个页面或者重新加载它,你可能希望它来做一些其他事情或者触发一些其他脚本,你可以这么做:

$('a.no-link').click(function (e) {
  e.preventDefault();
});

18.切换 fade/slide

fade 和 slide 是我们在 jQuery 中经常使用的动画效果,它们可以使元素显示效果更好。但是如果你希望元素显示时使用第一种效果,而消失时使用第二种效果,则可以这么做:

// Fade
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

19.简单的手风琴效果

这是一个实现手风琴效果快速简单的方法:

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

20.让两个 DIV 高度相同

有时你需要让两个 div 高度相同,而不管它们里面的内容多少。可以使用下面的代码片段:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

这段代码会循环一组元素,并设置它们的高度为元素中的最大高。

21. 验证元素是否为空

This will allow you to check if an element is empty.

$(document).ready(function() {
  if ($('#id').html()) {
   // do something
   }
});

22. 替换元素

Want to replace a div, or something else?

$(document).ready(function() {
  $('#id').replaceWith('
<DIV>I have been replaced</DIV>
');
});

23. jQuery延时加载功能

Want to delay something?

$(document).ready(function() {
   window.setTimeout(function() {
     // do something
   }, 1000);
});

24. 移除单词功能

Want to remove a certain word(s)?

$(document).ready(function() {
   var el = $('#id');
   el.html(el.html().replace(/word/ig, ""));
});

25. 验证元素是否存在于jquery对象集合中

Simply test with the .length property if the element exists.

$(document).ready(function() {
   if ($('#id').length) {
  // do something
  }
});

26. 使整个DIV可点击

Want to make the complete div clickable?

$(document).ready(function() {
    $("div").click(function(){
      //get the url from href attribute and launch the url
      window.location=$(this).find("a").attr("href"); return false;
    });
// how to use
<DIV><A href="index.html">home</A></DIV>

});

27. ID与Class之间转换

当改变Window大小时,在ID与Class之间切换

$(document).ready(function() {
   function checkWindowSize() {
  if ( $(window).width() > 1200 ) {
    $('body').addClass('large');
  }
  else {
    $('body').removeClass('large');
  }
   }
$(window).resize(checkWindowSize);
});

28. 克隆对象

Clone a div or an other element.

$(document).ready(function() {
  var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>
});

29. 使元素居屏幕中间位置

Center an element in the center of your screen.

$(document).ready(function() {
  jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
  }
  $("#id").center();
});

30. 写自己的选择器

Write your own selectors.

$(document).ready(function() {
   $.extend($.expr[':'], {
     moreThen1000px: function(a) {
       return $(a).width() > 1000;
    }
   });
  $('.box:moreThen1000px').click(function() {
    // creating a simple js alert box
    alert('The element that you have clicked is over 1000 pixels wide');
  });
});

31. 统计元素个数

Count an element.

$(document).ready(function() {
   $("p").size();
});

32. 使用自己的 Bullets

Want to use your own bullets instead of using the standard or images bullets?

$(document).ready(function() {
   $("ul").addClass("Replaced");
   $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

33. 引用Google主机上的Jquery类库

Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
  // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

34. 禁用Jquery(动画)效果

Disable all jQuery effects

$(document).ready(function() {
    jQuery.fx.off = true;
});

35. 与其他Javascript类库冲突解决方案

To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$(document).ready(function() {
   var $jq = jQuery.noConflict();
   $jq('#id').show();
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注