网页表单的javascript集成验证方法举例

Posted on 2007-11-18 00:12 yukui 阅读(780) 评论(0)  编辑  收藏 所属分类: 技术
<script language="JavaScript">


//设置焦点函数 
function focusElement(formName, elemName) { 
var elem = document.forms[formName].elements[elemName]; 
elem.focus( ); 
elem.select( ); 



// 验证下拉框 
function isChosen(select){ 
if (select.selectedIndex==0) { 
alert("请选择下拉单相应栏目."); 
focusElement(select.form.name,select.name); 
return false; 
} else { 
return true; 


//不为空函数 
function isNotEmpty(elem) { 
var str=elem.value; 
if(str==null || str.length==0) { 
alert("此项不能为空"); 
focusElement(elem.form.name,elem.name); 
return false; 
} else { 
return true; 




// 验证是否是数字 
function isNumber(elem) { 
var str=elem.value; 
var oneDecimal=false; 
var oneChar=0; 
str=str.toString( ); 
for (var i=0; i<str.length; i++) { 
oneChar=str.charAt(i).charCodeAt(0); 
// - 
if (oneChar==45) { 
if (i==0) { 
continue; 
} else { 
alert("Only the first character may be a minus sign."); 
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0); 
return false; 


// 小数点 
if (oneChar==46) { 
if (!oneDecimal) { 
oneDecimal=true; 
continue; 
} else { 
alert("输入的数字只允许有一个小数点."); 
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0); 
return false; 


// 数字只能在0和9之间 
if (oneChar<48 || oneChar > 57) { 
alert("此项只能输入数字."); 
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0); 
return false; 


return true; 

// 验证是否是数字电话 
function istel(elem) { 
var str=elem.value; 
var oneDecimal=false; 
var oneChar=0; 


str=str.toString( ); 
for (var i=0; i<str.length; i++) { 
oneChar=str.charAt(i).charCodeAt(0); 
if(oneChar==45){continue;} 
if(oneChar<48 || oneChar > 57) { 
alert("此项只能输入数字和'-'号."); 
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0); 
return false; 


return true; 

//验证输入数据的长度 
//邮编 
function isLenMatch(elem,lengthNum) { 
var str=elem.value; 
if (str.length != lengthNum) { 
alert("此项内容长度只能为"+lengthNum+"位."); 
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0); 
return false; 
} else { 
return true; 




//邮件地址验证 
function isEMailAddr(elem) { 
var str = elem.value; 
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 
if (!str.match(re)) { 
alert("您输入的不是有效的e-mail地址."); 
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0); 
return false; 
} else { 
return true; 


//单选按钮验证 
function isValidRadio(radio) { 
var valid=false; 
for (var i=0; i<radio.length; i++) { 
if (radio.checked) { 
return true; 


alert("单选按钮未选中."); 
radio[0].focus(); 
//setTimeout("focusElement('" + radio[0].form.name + "', '" + radio[0].name + "')", 0); 
focusElement(radio[0].form.name,radio[0].name); 
return false; 



</script>


<script language="JavaScript"> 
function validateForm(form) { 
if (isNotEmpty(form.name1) && isNotEmpty(form.name2)) {;}else{return false; 

</script> 
<title>JS验证程序Sample</title></head> 


<body> 
<form method="GET" action="index.htm" name="sampleForm" onsubmit="return validateForm(this)"> 
<p>姓名: 
<input type="text" size="30" name="name1" id="name1" /> 
</body> 
</html> 


表单验证 很有用 
长度限制
<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=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=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 屏蔽关键字(这里屏蔽sex和****)
<script language="javascript1.2">
function test() {
if((a.b.value.indexOf ("sex") == 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>
 
 
网页表单的javascript集成验证方法举例 
 
        原理:
           表单验证无非是要对要收集每一条信息进行验证,也就是要写一个名为
       frmValid的javascript函数,在其中执行如下操作:
             ...
             if (待验证条目 不符合条件)
             {
                  alert('出错了!');
                  待验证条目.focus();
                  return false;
             }
             ...
             // all right
             return true;
           当然,<form ... onsubmit='return frmValid()'>必须包含在
       HTML代码中。想想看,待验证条目越多代码越长,也就越容易出错。
           下面我们把验证条目放到一个数组里,如下:
             elemArray = new Array(
                 '待验证条目名',
                 '验证条件',
                 '出错提示');
           那么验证代码将大大精简,我们只要如下使用循环就可实现上述冗长
       代码时下的功能,这里我们用with和eval语句构造判断条件:
             with(eval('obj.'+elems[0]))
             {
                 if(eval(elems[1]))
                 {
                     window.alert(elems[2]);
                     focus();
                     return false;
                 }
             }
           我们建立多位数组就可实现循环遍历每个条目:
             elems = new Array(
                 new Arrary( ...),
                 ...
             );
             for(i = 0; i < elems.length; i++)
             {
                 // 上面的验证语句
             }

    
    实战:
        1、使用如下例子编写验证脚本:
<SCRIPT LANGUAGE="javascript" type="text/javascript">
//
// Function: frmValid
// ------------------
// Author    hongz
// Usage:    YourForm.onsbumit="return frmValid(this)".
// Purpose:  To validate form elements in an integrated way.
//
function frmValid(obj)
{
    // Elements array, initialization for validation
    elems = new Array(
        new Array(
            'username',  // name of elements to be validated
            'value.length<1 || value.search(/[^a-zA-z0-9_]/)>=0', 
                         // validation condition
            '无效的用户名:只能输入6-20位字母、数字、下划线的组合!'),
                         // prompt on failure
        new Array(
            'password', 
            'value.length<5 || value.search(/[^a-zA-z0-9_]/)>=0', 
            '无效的密码:只能输入6-20位字母、数字、下划线的组合!'),
        new Array(
            'email', 
            'isMail(value)==false', 
            'Email是您在网上的重要联络工具,请务必正确填写!')
    );

    // Validate here, using eval statement.
    for(i = 0; i < elems.length; i++)
    {
        with(eval('obj.'+elems[0]))
        {
            if(eval(elems[1]))
            {
                window.alert(elems[2]);
                focus();
                return false;
            }
        }
    }
    return true;
}
//-->
</SCRIPT>
        2、为form添加onsubmit属性:
           <form ... onsubmit='return frmValid(this)'>

 
Javascript客户端验证代码 
 
代码: 

--------------------------------------------------------------------------------
 
<SCRIPT language=JavaScript><!-- 
function passwordt(theForm){ 
    if (theForm.user_name.value == ""){ 
        alert("登录用户名不能为空,请重新填写!"); 
        theForm.user_name.focus(); 
        return (false); 
    } 

    if (theForm.user_pass.value == ""){ 
        alert("登录密码不能为空,请重新填写!"); 
        theForm.user_pass.focus(); 
        return (false); 
    } 
                     
    if (theForm.user_pass.value.length < 3){ 
        alert("登录密码不能少于3个字符,请重新填写!"); 
        theForm.user_pass.focus(); 
        return (false); 
    } 
           
    if (theForm.re_password.value == ""){ 
        alert("确认新密码不能为空,请重新填写!"); 
        theForm.re_password.focus(); 
        return (false); 
    } 
         
    if (theForm.re_password.value.length < 3){ 
        alert("确认新密码不能少于3个字符,请重新填写!"); 
        theForm.re_password.focus(); 
        return (false); 
    } 
           
    if (theForm.user_pass.value != theForm.re_password.value){ 
        alert("新密码和确认新密码不同,请重新填写!"); 
        theForm.user_pass.focus(); 
        return (false); 
    } 
         
    if (theForm.user_namec.value=="") { 
        alert ('请填写姓名!'); 
        theForm.user_namec.focus(); 
        return false; 
    } 
     
    if ((!theForm.user_sex(0).checked)&&(!theForm.user_sex(1).checked)){ 
        alert ('请选择用户性别!'); 
        theForm.user_sex(0).focus(); 
        return false; 
    } 

    if ((theForm.user_birth_year.value == "")||(fucCheckNUM(theForm.user_birth_year.value)==0)||(theForm.user_birth_year.value.length!=4)||((theForm.user_birth_year.value <1900) || (theForm.user_birth_year.value >2002 ) )) { 
        alert("请填写正确的出生年份!"); 
        theForm.user_birth_year.focus(); 
        return (false); 
       } 
        
       if (theForm.user_birth_month.value=="0"){ 
        alert("请选择出生月份!"); 
        theForm.user_birth_month.focus(); 
        return (false); 
       } 
        
       if (theForm.user_birth_day.value=="0"){ 
        alert("请选择出生日期!"); 
        theForm.user_birth_day.focus(); 
        return (false); 
       } 

       if ((theForm.user_birth_month.value=="2") && (theForm.user_birth_day.value>29)){ 
           alert("请选择正确的出生日期!"); 
        theForm.user_birth_month.focus(); 
        return (false); 
    } 
            
    if (((theForm.user_birth_month.value=="4")||(theForm.user_birth_month.value=="6")||(theForm.user_birth_month.value=="9")||(theForm.user_birth_month.value=="11")) && (theForm.user_birth_day.value==31)){ 
        alert("请选择正确的出生日期!"); 
        theForm.user_birth_month.focus(); 
        return (false); 
       } 
     
    if (theForm.user_country.value=="") { 
        alert("请选择所在国家!"); 
        theForm.user_country.focus(); 
        return (false); 
    }     

    if (theForm.user_city.value =="") { 
        alert("请选择城市!"); 
        theForm.user_city.focus(); 
        return (false); 
    } 

    if (theForm.user_adds.value == "" ){ 
        alert("家庭住址不能为空,请重新填写!"); 
        theForm.user_adds.focus(); 
        return (false); 
    } 

    if (theForm.user_postcode.value == "" ) { 
        alert("邮政编码不能为空,请重新填写!"); 
        theForm.user_postcode.focus(); 
        return (false); 
    }     

    if (theForm.user_tel.value == "" ) { 
        alert("邮政编码不能为空,请重新填写!"); 
        theForm.user_tel.focus(); 
        return (false); 
    } 
     
    if (theForm.user_mail.value=="") { 
        alert("请填写EMAIL!"); 
        theForm.user_mail.focus(); 
        return (false); 
    } 

    if ((theForm.user_mail.value!="") && (chkemail(theForm.user_mail.value)==0)) { 
        alert("EMAIL格式不对,请重新填写!"); 
        theForm.user_mail.focus(); 
        return (false); 
    } 

    return (true); 


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; 


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; 


function chg_nation(nation){ 
    if (nation!='cn'){ 
        ini_province(nation); 
        document.user_form.selProvince.disabled = true; 
        document.user_form.selProvince.value="国外城市"; 
        document.user_form.selCity.value="国外城市"; 
    }else{ 
        ini_province(nation); 
        document.user_form.selProvince.disabled = false; 
        document.user_form.selProvince.value="0"; 
        document.user_form.selCity.value=""; 
    } 


function chg_province(province){ 
    obj=document.getElementById("list_city"); 
    obj.src="list_city.php?province="+province; 


//--> 
</SCRIPT> 

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 131, comments - 12, trackbacks - 0, articles - 32

Copyright © yukui