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>