jquery驗證簡單示例

php之路發表於2013-12-23
jQuery

來自《jquery 權威指南》

輸入某個字元，選擇相應的驗證型別，並輸出驗證結果

-----------------------------------

效果顯示：

詳細程式碼：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<style type="text/css">
body,div,ul,li,p{margin: 0;padding: 0; font-size: 13px;}
ul{list-style-type: none;}
a{text-decoration: none;}
fieldset{width: 580px;}
fieldset div{padding: 8px;}
fieldset div select{font-size: 9pt;padding: 1px;}

#tip{margin-top: 10px;padding: 10px;border: solid 1px #666;background-color: #eee;width: 250px;display: none;}
.txt{border: solid 1px #666;padding: 2px;width: 120px;margin-right: 3px;}
.btn{border: solid 1px #666;padding: 2px;width: 60px;}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui/ui/jquery-ui.js"></script>
<script type="text/javascript">
;(function($){
    $.extend({
        chkStrByType: function(strS, chkType){
            var result;
            var chkStr = arrRegEx[chkType];
            var reg = RegExp(chkStr, 'g');
            result = reg.test(strS);
            return result;
        }
        
    });
    var arrRegEx = {};
    arrRegEx['email'] = '\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*';
    arrRegEx['telphone'] = '(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d{7,8}';
    arrRegEx['postcode'] = '^\\d{6}$';
    arrRegEx['zh_cn'] = '[\\u4e00-\\u9fa5]';
    arrRegEx['number'] = '^-?[0-9]\\d*$';
    arrRegEx['url'] = '[a-zA-Z]+://[^\\s]*';
})(jQuery);

$(function(){
    $('#btn').click(function(){
        var strChk = $("#chkStr").val();
        var chkType = $("#selType option:selected").val();
        var res = $.chkStrByType(strChk,chkType);
        
        var strShow = "";
        var strType = res ? "是" : "不是";

        strShow = "\"" + strChk + "\"" + strType + $("select :selected").text() + "型別";
        $("#tip").show().html("").append(strShow);
    });    
})

</script>
</head>
<body>

<fieldset>
    <legend>字串型別檢測</legend>
    <div>
        <span>檢測內容：</span>
        <input id="chkStr" type="text" class="txt" />
        <span>選擇型別：</span>
        <select id="selType">
            <option value="email">郵箱</option>
            <option value="telphone">電話號碼</option>
            <option value="postcode">郵箱編碼</option>
            <option value="number">整數</option>
            <option value="zh_cn">漢字</option>
            <option value="url">網址</option>
        </select>
        <input id="btn" type="button" value="檢測" class="btn" />
        <div id="tip"></div>
    </div>
</fieldset>


</body>
</html>

 

相關文章