zoukankan html css js c++ java

通用jquery页面验证

页面通过给input 标签设置样式或者属性，即可实现所有页面的验证，customValidate方法并支持自己补充验证!

验证包括：必输项，只能输入数字，输入数字并设定小数最大位数，下拉框必选，复选框必选，电话格式，手机格式，电话或手机，邮箱格式，邮编格式等验证！

页面的html 代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
    <link href="css/validate.css" rel="stylesheet" type="text/css" />
     <style type="text/css">
        .centertable
        {
            border: 1px solid #D0D0D0;
            border-collapse: collapse;
            font-size: 14px;
             100%;
            table-layout: word-wrap:break-word;
            word-break: break-all;
        }
        
        .centertable th
        {
            border-collapse: collapse; /*border:solid 1px #0058a3;*/
            border: solid 1px #D0D0D0;
            text-align:right;
            height:30px;
            font-weight:normal;
        }
        
        .centertable td
        {
            border-collapse: collapse; /*border:solid 1px #0058a3;*/
            border: solid 1px #D0D0D0;
            text-align:left;
            70%;
            height:30px;
        }
        </style>
        
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/Validate.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="700px; margin:0 auto;">
        <!-- 只能输入数字和小数点-->
        <div style="text-align:center;">常用的js验证总结</div>
        <table cellpadding="0" cellspacing="0" class="centertable">
            <tr>
                <th>
        <!-- 只能输入数字-->
        只能输入数字:</th>
                <td>
                    <asp:TextBox ID="txtCount" runat="server" onkeyup="this.value=this.value.replace(/D/g,'')"
                    onblur="this.value=this.value.replace(/D/g,'')" CssClass="mustInput" ToolTip="产品名称"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <th>
        输入数字并指定小数点最大位数:</th>
                <td>
        <asp:TextBox ID="txtNumberAndPoint" runat="server" onkeyup="checkNumberPointByUp(this,2);" onblur="checkNumberPointByBlur(this,2);" CssClass="mustInput"  ToolTip="价格"></asp:TextBox>
                </td>
            </tr>
            
            <tr>
                <th>
                    公司类型:</th>
                <td>
                    <asp:DropDownList ID="drpCompany" runat="server" CssClass="mustDrp" ToolTip="公司类型">
                        <asp:ListItem Value="-1">请选择</asp:ListItem>
                        <asp:ListItem Value="0">国企</asp:ListItem>
                        <asp:ListItem Value="1">事业单位</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            
            <tr>
                <th>
                    公司产品:</th>
                <td>
                    <asp:CheckBoxList ID="chkProducts" runat="server" CssClass="mustChk"  ToolTip="公司产品"
                        RepeatDirection="Horizontal" RepeatLayout="Flow">
                        <asp:ListItem>电脑</asp:ListItem>
                        <asp:ListItem>手机</asp:ListItem>
                        <asp:ListItem>Pad</asp:ListItem>
                        <asp:ListItem>手表</asp:ListItem>
                    </asp:CheckBoxList>
                </td>
            </tr>
            
            <tr>
                <th>
                    公司:</th>
                <td>
        <asp:TextBox ID="txtNumberAndPoint0" runat="server" onkeyup="checkNumberPointByUp(this,2);" 
                        onblur="checkNumberPointByBlur(this,2);" CssClass="choose"  ToolTip="价格"></asp:TextBox>
                </td>
            </tr>
            
            <tr>
                <th>
                电话:</th>
                <td>
                    <asp:TextBox ID="txtPhone" runat="server" validateType="phone"></asp:TextBox>
                </td>
            </tr>
            
            
            <tr>
                <th>
                手机:</th>
                <td>
                    <asp:TextBox ID="txtMobile" runat="server" validateType="mobile"></asp:TextBox>
                </td>
            </tr>
            
            
                 <tr>
                <th>
                电话/手机:</th>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" validateType="phoneormobile"></asp:TextBox>
                </td>
            </tr>
            
            
            <tr>
                <th>
                邮箱:</th>
                <td>
                    <asp:TextBox ID="txtEmail" runat="server"  validateType="email"></asp:TextBox>
                </td>
            </tr>
            
            <tr>
                <th>
                邮编:</th>
                <td>
                    <asp:TextBox ID="txtZipCode" runat="server" MaxLength="6"  validateType="zipcode"></asp:TextBox>
                </td>
            </tr>
            
            <tr>
                <td colspan="2" style="text-align:center">
                    <asp:Button ID="Button1" runat="server" Text="验证" CssClass="submitInput" ValidateIsEnough="false"/>
                 </td>
            </tr>
        </table>
        <br />
         </div>
    </form>
</body>
</html>

css 样式:

.submitInput
{
    80px;
}

.mustInput
{
	200px;
	background-color:#FFFFE6;
}

.mustDrp
{
	205px;
	background-color:#FFFFE6;
}

.mustChk input
{
	background-color:#FFFFE6;
}

.choose 
{
    200px;
    background: url(../images/icon1.gif) no-repeat scroll right center #FFFFFF;
    border: 1px solid #999999;
    height: 20px;
    cursor:pointer;
}

通用的js验证代码:

/*
    网页上文本框输入的验证
    版权所有者:陈家涛 
*/
$(document).ready(function() {
    $(".submitInput").bind("click", function() {
        var flag = true;
        var ValidateIsEnough = true;
        if (null != $(this).attr("ValidateIsEnough") && $(this).attr("ValidateIsEnough") == "false") {
            ValidateIsEnough = false;
        }

        /*验证所有文本框 */
        $("input[type=text]").each(function() {
            if ($(this).hasClass("mustInput") && $.trim($(this).val()) == "") {
                /*所有非空验证 */
                alert($(this).attr("title") + "不能为空!");
                flag = false;
                return false;
            }

            if (null != $(this).attr("validateType") && $(this).val() != "") {
                /*是否有类型验证 */
                if (!validateType($(this))) {
                    flag = false;
                    return false;
                }
            }
        });

        /*验证所有下拉框框 */
        if (flag) {
            $("select").each(function() {
                if (null == $(this).val() || $(this).val() == "-1") {
                    alert("请选择" + $(this).attr("title") + "!");
                    flag = false;
                    return false;
                }
            });
        }


        /*验证所有复选框 */
        if (flag) {
            var chkFlag = true;
            $(".mustChk").each(function() {
                if ($(this).children(0).attr("checked")) {
                    chkFlag = false;
                    return false;
                }
                if (chkFlag) {
                    alert("请选择" + $(this).attr("title"));
                    flag = false;
                    return false;
                }
            });
        }

        ValidateIsEnough = customValidate();
        if (flag && ValidateIsEnough) {
            return true;
        }
        else {
            return false;
        }
    });
});



function validateType(obj) {
    var flag = false;
    var type = $(obj).attr("validateType");    
    var str = $.trim($(obj).val());
    switch (type) {
        case "phone":
            if (!IsPhone(str)) {
                alert("电话格式不正确!");
                return false;
            }
            break;
        case "email":
            if (!IsEmail(str)) {
                alert("Email格式不正确!");
                return false;
            }
            break;
        case "mobile":
            if (!IsMobile(str)) {
                alert("手机格式不正确!");
                return false;
            }
            break;
        case "zipcode":
            if (!IsPhone(str)) {
                alert("邮编格式不正确!");
                return false;
            }
        case "phoneormobile":
            if (!IsPhone(str) && (!IsMobile(str))) {
                alert("电话格式不正确!");
                return false;
            }
            break;
        default:              
            break;
    }
    return true;
}


//是否是邮箱
function IsEmail(str) {
    if (str.length != 0) {
        var reg = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
        if (reg.test(str)) {
            return true;
        }
    }
    return false;
}

//是否是邮编
function IsZIP(str) {
    if (str.length != 0) {
        reg = /^d{6}$/;
        if (reg.test(str)) {
            return true;
        }
    }
    return false;
}

//是否是中文
function IsChinese(str) {
    if (str.length != 0) {
        reg = /^[u0391-uFFE5]+$/;
        if (reg.test(str)) {
            return true;
        }
    }
    return false;
}


//是否是手机
function IsMobile(str) {
    if (str.length != 0) {
        reg = /^1[3-8][0-9]{9}$/;
        if (reg.test(str)) {
            return true;
        }
    }
    return false;
}


//是否是电话
function IsPhone(str) {
    if (str.length != 0) {
        reg = /^(((d{2,3}))|(d{3}-))?((0d{2,3})|0d{2,3}-)?[1-9]d{6,7}(-d{1,4})?$/;
        if (reg.test(str)) {
            return true;
        }
    }
    return false;
}


///自定义验证
function customValidate() {
    return true;
}

/*  
    验证只能输入数字，并可指定小数点的最大位数 
*/
function checkNumberPointByUp(obj, size) {
    var result = $.trim(obj.value);
    if ("" != result) {
        var last = result.substring(result.length - 1);
        if (result == last) {
            //代表只有1位不可以是0或者是小数点
            if (last == ".") {
                result = "";
            }
            else {
                if (!(/d/i.test(result))) {
                    result = "";
                }
            }
        }
        else {
            var flag = true;
            if (size > 0) {
                //有小数点位数控制
                var index = result.indexOf('.');
                if (index > 0) {
                    //代表有小数点
                    var behindPoint = result.substring(index + 1);
                    if (behindPoint.length > size) {
                        result = result.substring(0, result.length - 1);
                        flag = false;
                    }
                }
            }
            if (flag) {
                //需要取验证
                var reg = /^[0-9.]$/;
                var r = last.match(reg);
                if (r == null)
                    result = result.substring(0, result.length - 1);
            }

            if (result.length == 2) {
                if (result.substring(0, 1) == "0" && result.substring(1, 2) != ".") {
                    //首位是0第二位不是小数点需要清空
                    result = "";
                }
            }
        }
    }
    obj.value = result;
}

function checkNumberPointByBlur(obj, size) {
    var result = $.trim(obj.value);
    var flag = true;
    if (result.indexOf('.') > -1) {
        //代表有小数点
        if (size > 0) {
            //代表有小数位数限制
            if (result.substring(result.indexOf('.') + 1).length > size) {
                flag = false;
                result = "";
            }
        }
    }

    if (flag) {
        for (var i = 0; i < result.length; i++) {
            if (result.substr(0,1)!= ".") {
                if (!(/d/i.test(result.substr(0, 1)))) {
                    result = "";
                    break;
                }
            }
        }
    }
    obj.value = result;
}

查看全文

相关阅读:
https://blog.csdn.net/nameofcsdn/article/details/53164652
洛谷
 模板
 模板
 Gym 101911E "Painting the Fence"（线段树区间更新+双端队列）
Gym 101911F “Tickets”
图论：最小瓶颈生成树
 图论：次小生成树
 图论：费用流-SPFA+EK
图论：Dinic算法

原文地址：https://www.cnblogs.com/chenjt/p/3198594.html

热门文章
模板
 洛谷
 2019年华南理工大学春季赛感想
 模板
 模板
 洛谷
 洛谷
 洛谷
 洛谷
 洛谷