您的位置：首页 > Web前端 > JQuery

JQuery插件第十四个:简单验证表单

2011-11-29 06:04 519 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	JQuery插件第十四个:简单验证表单
</title>
<script type="text/javascript" language="javascript" src="jquery-1.6.js" ></script>
<script type="text/javascript" language="javascript">		
 jQuery.Validate=
{
    submit:function(pParam1)
    {
        var rtnValue=true,propertyCount=0,$e=(arguments.length==1)?$("#"+pParam1+" input"):$("input",document.forms[0]);
        $e.each(function(){
            if(rtnValue==false) return false;//如果发现返回值是假直接中断
            var e=this;
            switch(e.type.toLowerCase())
            {
                case 'text':
                   if(e.isnull=='false'){
                        if(e.value==''){
                            alert(e.alerttext+'不能为空');
                            e.focus();
                            rtnValue=false;
                        }
                    }
                    if(rtnValue==true){
                        if(e.isnum=='true'){   
                                if(isNaN(e.value)){
                                    //不是数字
                                    alert(e.alerttext+'只能为数字!');
                                    e.select();
                                    e.focus();    
                                    rtnValue=false;
                                }
                                else{ //是数字
                                if(e.minvalue!=null){propertyCount+=1;}
                                if(e.maxvalue!=null){propertyCount+=1;}
                                if(propertyCount==2){
                                    if(parseFloat(e.value)<parseFloat(e.minvalue) || parseFloat(e.value)>parseFloat(e.maxvalue)){
                                        alert(e.alerttext+'应在 '+e.minvalue+' 和 '+e.maxvalue+' 之间');
                                        e.select();
                                        e.focus();    
                                        rtnValue=false;
                                    }
                                }
                                else if(e.minvalue!=null){
                                    if(parseFloat(e.value)<parseFloat(e.minvalue)){
                                        alert(e.alerttext+'不能小于 '+e.minvalue);
                                        e.select();
                                        e.focus();    
                                        rtnValue=false;
                                    }
                                }
                                else if(e.maxvalue!=null){
                                    if(parseFloat(e.value)>parseFloat(e.maxvalue)){
                                        alert(e.alerttext+'不能大于 '+e.maxvalue);
                                        e.select();
                                        e.focus();    
                                        rtnValue=false;
                                    }
                                }
                            }
                        }
                    }
                    break;
            }
        });
        return rtnValue;
    },
    back:function()
    {
	    location.href = '?';
    }
}
$(function(){
    $("#btn").click(function(){
        jQuery.Validate.submit();
    });
    
    $("#go").click(function(){
        jQuery.Validate.back();
    });
    
});

    </script>
</head>
<body>
    <form name="form1" method="post" action="jq_1.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTM5NDgwMzIxMmRkuoF+mEcyzpPvnvdc5QOQOKra/VI=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALO1YyrBALd1vK2CgLs0bLrBgKSoqqWD4UI/Grs09yLYQGt8AokkTNdgoIy" />
</div>
        <div>
            <table width="85%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#C1CCDB"
                style="margin-top: 20px">
                <tr>
                    <td width="13%" height="28" align="center" bgcolor="#f4f7fa" class="shisidian">
                        颜色名称</td>
                    <td width="87%" bgcolor="#f4f7fa" class="bule">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="2%">
                                     </td>
                                <td width="98%">
                                    <input name="CName" type="text" maxlength="50" id="CName" alerttext="颜色名称" isnull="false" style="width:330px;" /><span style="color: Red">*</span>（必填）</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="13%" height="28" align="center" bgcolor="#f4f7fa" class="shisidian">
                       数量</td>
                    <td width="87%" bgcolor="#f4f7fa" class="bule">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="2%">
                                     </td>
                                <td width="98%">
                                    <input name="TextBox1" type="text" maxlength="50" id="TextBox1" alerttext="数量" isnull="false" isnum="true" maxvalue="100000" minvalue="10" style="width:330px;" /><span style="color: Red">*</span>（必填）</td>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="38%" height="55" >
                         </td>
                    <td width="15%">
                        <a id="btn" href="javascript:__doPostBack('btn','')">
							<img src="../images/tianjia.gif" width="61" height="26" border="0" /></a>
                    </td>
                    <td width="47%">
                        <a id="go" href="#" >
                            <img src="../images/fanhui.gif" width="61" height="26" border="0" /></a>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
主要是对表单根据验证需要设置自定义属性isnull, isnum, maxvalue, minvalue
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航