JavaScript常用表单验证&收集的35个 jQuery 小技巧


目录:
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();
});


你可能感兴趣的:(JavaScript常用表单验证&收集的35个 jQuery 小技巧)