碼上快樂

相關內容    簡體    繁體

數據校驗DWZ與validator

本文轉載自   查看原文   2015-03-04 13:37   3465    前端技術

在做系統時經常會用到數據校驗，數據校驗可以自己寫，也可以用現在成的，現在記錄下兩種類庫使用方法，

validato

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="<%=keywords%>">
    <meta http-equiv="description" content="<%=description%>">
    <META http-equiv="X-UA-Compatible" content="IE=10" > 
    <!--加載jquery類-->
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script>
    if (!window.jQuery) {
    var script = document.createElement('script');
    script.src = "js/jquery-1.7.1.min.js";
    document.body.appendChild(script);
    }
    </script>
    <!--加載樣式，可不加-->
    <link rel="stylesheet" href="validator-0.7.0/jquery.validator.css">
    <!--加載validator類-->
    <script type="text/javascript" src="validator-0.7.0/jquery.validator.js"></script>
    <script type="text/javascript" src="validator-0.7.0/local/zh_CN.js"></script>
</head>
<body style="background:#fff;">

    <form role="form" action="user/updatesUser" enctype="multipart/form-data" method="post" validate="true" >
        <input type="text" id="a" data-rule="required"/><br/>
        <input type="text" id="b" data-rule="required ID_card"/><br/>
        <input type="text" id="c" data-rule="required"/><br/>
        <input type="text" id="d" data-rule="required email"/><br/>
        <input type="text" id="e" data-rule="tel"/><br/>
        <input type="text" id="f" data-rule="doubles"/><br/>
        <input type="text" id="g" data-rule="digits"/><br/>
        <input type="submit"/>
    </form>
</body>
</html>

用data-rule設置數據校驗的格式，

 

如要加新的校驗類型只要在 zh_CN.js文件中添加正則表達式即可。

如下（部分代碼

        rules: {
            digits: [/^\d+$/, "請輸入整數數字"]
    ,doubles:[/^[0-9]*[.]{0,1}[0-9]*$/,"請輸入數字"]
    ,positiveinteger:[/^[1-9][0-9]*$/,"請輸入正整數"]
    ,letters: [/^[a-z]+$/i, "{0}只能輸入字母"]
    ,tel: [/^(?:(?:1[3-9]\d{9})|(?:0\d{2,3}[- ]?[1-9]\d{6,7})|(?:[48]00[- ]?[1-9]\d{6}))$/, "聯系電話格式不正確"]
    ,mobile: [/^1[3-9]\d{9}$/, "手機號格式不正確"]
    ,email: [/^(?:[a-z0-9]+[_\-+.]?)*[a-z0-9]+@(?:([a-z0-9]+-?)*[a-z0-9]+\.)+([a-z]{2,})+$/i, "郵箱格式不正確"]
    ,qq: [/^[1-9]\d{4,}$/, "QQ號格式不正確"]
    ,date: [/^\d{4}-\d{1,2}-\d{1,2}$/, "請輸入正確的日期,例:yyyy-mm-dd"]
    ,time: [/^([01]\d|2[0-3])(:[0-5]\d){1,2}$/, "請輸入正確的時間,例:14:30或14:30:00"]
    ,ID_card: [/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z]|\d{3}[a-z])$/, "請輸入正確的身份證號碼"]
    ,url: [/^(https?|ftp):\/\/[^\s]+$/i, "網址格式不正確"]
    ,postcode: [/^[1-9]\d{5}$/, "郵政編碼格式不正確"]
    ,chinese: [/^[\u0391-\uFFE5]+$/, "請輸入中文"]
    ,contentsixty: [/^.[1-60]+$/, "不於大於60個字"]
    ,username: [/^\w{3,12}$/, "請輸入3-12位數字、字母、下划線"]
    ,password: [/^[0-9a-zA-Z]{6,16}$/, "密碼由6-16位數字、字母組成"]
    ,accept: function (element, params){
        if (!params) return true;
        var ext = params[0];
        return (ext === '*') ||
               (new RegExp(".(?:" + (ext || "png|jpg|jpeg|gif") + ")$", "i")).test(element.value) ||
               this.renderMsg("只接受{1}后綴", ext.replace('|', ','));
    }
            
        }
    });

２.DWZ數據校驗

 

html代碼如下

<html>
<head>
    <title>validate</title>
    <style>
        span.error {
        overflow: hidden;
        width: 165px;
        height: 21px;
        padding: 0 3px;
        line-height: 21px;
        background: #F00;
        color: #FFF;
        top: 5px;
        left: 318px;
        }
        
        input.required, textarea.required { background-position:100% 0;}
        .textInput, input.focus, input.required, input.error, input.readonly, input.disabled, textarea.focus, textarea.required, textarea.error, textarea.readonly, textarea.disabled {
        background: url(themes/azure/images/form/input_bg.png) right no-repeat scroll;
        }
    </style>
<!--
<link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/>
-->
<!--[if IE]>
<link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->

<!--[if lte IE 9]>
<script src="js/speedup.js" type="text/javascript"></script>
<![endif]-->
<script src="js/speedup.js" type="text/javascript"></script><!-- 【可選】js加速-->
<script src="js/jquery-1.7.2.js" type="text/javascript"></script><!--【必須】jQuery庫-->
<script src="js/jquery.cookie.js" type="text/javascript"></script><!--【可選】js操作cookie, 目前用於記住用戶選擇的theme風格-->
<script src="js/jquery.validate.js" type="text/javascript"></script><!--【必須】表單驗證-->
<script src="js/jquery.bgiframe.js" type="text/javascript"></script><!--【可選】用於IE6彈出層不能蓋住select問題-->
<script src="xheditor/xheditor-1.2.1.min.js" type="text/javascript"></script><!--【可選】xheditor在線編輯器-->
<script src="uploadify/scripts/jquery.uploadify.min.js" type="text/javascript"></script><!--【可選】用於文件批量上傳--> 
<script src="js/dwz.min.js" type="text/javascript"></script><!-- 【必須】DWZ框架js壓縮包--> 
<script src="js/dwz.regional.zh.js" type="text/javascript"></script> <!--【可選】 用於國際化-->
</head>
<body>
<div style="height:100px"></div>
<div class="pageContent" style="height:1000px">
    <form action="http://www.baidu.com" class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDone,'required-validate')">
        <input type="text" value="321">
        <input type="text" name="name" maxlength="20" class="required" />
        <input type="text" name="email" class="required email" alt="請輸入您的電子郵件"/>
        <input type="text" name="phone" class="required phone" alt="請輸入您的電話"/>
        <input type="submit"/>
    </form>

    <br><br><br>
    <form method="post" action="demo/common/ajaxDone.html" class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDone,'required-validate')">
        <div class="pageFormContent nowrap" layoutH="200" >

            <dl>
                <dt>必填：</dt>
                <dd>
                    <input type="text" name="name" maxlength="20" class="required" />
                    <span class="info">class="required"</span>
                </dd>
            </dl>
            <dl>
                <dt>必填+郵箱：</dt>
                <dd>
                    <input type="text" name="email" class="required email" alt="請輸入您的電子郵件"/>
                    <span class="info">class="required email"</span>
                </dd>
            </dl>
            <dl>
                <dt>電話：</dt>
                <dd>
                    <input type="text" name="phone" class="phone" alt="請輸入您的電話"/>
                    <span class="info">class="phone"</span>
                </dd>
            </dl>
            <dl>
                <dt>密碼：</dt>
                <dd>
                    <input id="w_validation_pwd" type="password" name="password" class="required alphanumeric" minlength="6" maxlength="20" alt="字母、數字、下划線 6-20位"/>
                    <span class="info">class="required alphanumeric" minlength="6" maxlength="20"</span>
                </dd>
            </dl>
            <dl>
                <dt>確認密碼：</dt>
                <dd>
                    <input type="password" name="repassword" class="required" equalto="#w_validation_pwd"/>
                    <span class="info">class="required" equalto="#xxxId"</span>
                </dd>
            </dl>
            
            <dl>
                <dt>整數：</dt>
                <dd>
                    <input type="text" name="digits" class="digits" />
                    <span class="info">class="digits"</span>
                </dd>
            </dl>
            <dl>
                <dt>浮點數：</dt>
                <dd>
                    <input type="text" name="number" class="number" />
                    <span class="info">class="number"</span>
                </dd>
            </dl>
            <dl>
                <dt>最小值：</dt>
                <dd>
                    <input type="text" name="min" min="1"/>
                    <span class="info">min="1"</span>
                </dd>
            </dl>
            <dl>
                <dt>最大值：</dt>
                <dd>
                    <input type="text" name="max" max="10"/>
                    <span class="info">max="10"</span>
                </dd>
            </dl>
            <dl>
                <dt>最小值-最大值：</dt>
                <dd>
                    <input type="text" name="min_max" min="1" max="10"/>
                    <span class="info">min="1" max="10"</span>
                </dd>
            </dl>
            <dl>
                <dt>最小長度：</dt>
                <dd>
                    <input type="text" name="minlength_maxlength6" minlength="6" />
                    <span class="info">min="6"</span>
                </dd>
            </dl>
            <dl>
                <dt>最大長度：</dt>
                <dd>
                    <input type="text" name="minlength_maxlength10" maxlength="10"/>
                    <span class="info">max="10"</span>
                </dd>
            </dl>
            <dl>
                <dt>最小長度-最大長度：</dt>
                <dd>
                    <input type="text" name="minlength_maxlength" minlength="6" maxlength="20"/>
                    <span class="info">minlength="6" maxlength="20"</span>
                </dd>
            </dl>
            <dl>
                <dt>信用卡：</dt>
                <dd>
                    <input type="text" name="creditcard" class="creditcard" />
                    <span class="info">class="creditcard"</span>
                </dd>
            </dl>
            <dl>
                <dt>字母、數字、下划線：</dt>
                <dd>
                    <input type="text" name="alphanumeric" class="alphanumeric" />
                    <span class="info">class="alphanumeric"</span>
                </dd>
            </dl>
            <dl>
                <dt>字母：</dt>
                <dd>
                    <input type="text" name="lettersonly" class="lettersonly" />
                    <span class="info">class="lettersonly"</span>
                </dd>
            </dl>
            <dl>
                <dt>網址：</dt>
                <dd>
                    <input type="text" name="url" class="url" />
                    <span class="info">class="url"</span>
                </dd>
            </dl>
            <dl>
                <dt>remote：</dt>
                <dd>
                    <input type="text" name="remote" remote="validate_remote.html"/>
                    <span class="info">唯一性驗證input添加屬性：remote="xxxUrl"</span>
                </dd>
            </dl>
            <!--
            <dl>
                <dt>customvalid+remote：</dt>
                <dd>
                    <input type="text" name="remote2" remote="validate_remote.html" customvalid="customvalidXxx(element)"/>
                    <span class="info">customvalid="customvalidXxx(element)" | remote="xxxUrl"</span>
                </dd>
            </dl>
            -->
            <div class="divider"></div>
            <p>自定義擴展請參照：dwz.validate.method.js</p>
            <p>錯誤提示信息國際化請參照：dwz.regional.zh.js</p>
        </div>
        <div class="formBar">
            <ul>
                <li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li>
                <li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li>
            </ul>
        </div>
    </form>
    
</div>

    <br><br><br>
    <br><br><br>
    <br><br><br>
</body>
</html>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 spring mvc 4數據校驗 validator 基於springboot使用hibernate validator校驗數據 使用Hibernate Validator來幫你做數據校驗 Java后台數據校驗validator SpringBoot 2 快速整合 | Hibernate Validator 數據校驗 繼承spring的validator接口，實現對數據的校驗 如何優雅的做數據校驗-Hibernate Validator詳細使用說明 JSR303的數據校驗-Hibernate Validator方式實現 struts2學習筆記--使用Validator校驗數據 Spring MVC利用Hibernate Validator實現后端數據校驗（一）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM