来自《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>

jquery验证简单示例的更多相关文章

  1. C# .net Jquery ajax 简单示例

    jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...

  2. jQuery+pjax简单示例汇总

    pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求 ...

  3. jQuery使用简单示例 validate 插件

    摘录自:http://blog.csdn.net/u010320371/article/details/51104783用户登录 用户名 密码 确认密码 <!DOCTYPE html> & ...

  4. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  5. 网络编程4 网络编程之FTP上传简单示例&socketserver介绍&验证合法性连接

    今日大纲: 1.FTP上传简单示例(详细代码) 2.socketserver简单示例&源码介绍 3.验证合法性连接//[秘钥加密(urandom,sendall)(注意:中文的!不能用)] 内 ...

  6. jquery验证手机号码、邮箱格式是否正确示例代码

    本文为大家介绍下使用jquery验证邮箱.验证手机号码,具体实现思路及代码如下,感兴趣的朋友可以学习下 复制代码代码如下: //jquery验证邮箱  function checkSubmitEmai ...

  7. jQuery验证表单格式

    工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...

  8. jQuery 验证 Validation

    jQuery Validation 目录 简介: Form validation made easy. Validate a simple comment form with inline rules ...

  9. ASP.NET MVC的客户端验证：jQuery验证在Model验证中的实现

    在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的.服务端验证最终实现在相应的ModelVa ...

随机推荐

  1. 轻量级封装DbUtils&Mybatis之四MyBatis主键

    MyBatis主键 不支持对象列表存储时对自增id字段的赋值(至少包括3.2.6和3.3.0版本),如果id不是采用底层DB自增主键赋值,不必考虑此问题 温馨提示:分布式DB环境下,DB主键一般会采用 ...

  2. (转)Inno Setup入门（二十一）——Inno Setup类参考（7）

    本文转载自:http://blog.csdn.net/yushanddddfenghailin/article/details/17268435 复选框 复选框(CheckBox)用于多个并不互斥的几 ...

  3. PAT 甲级 1007 Maximum Subsequence Sum (25)（25 分）（0不是负数，水题）

    1007 Maximum Subsequence Sum (25)(25 分) Given a sequence of K integers { N~1~, N~2~, ..., N~K~ }. A ...

  4. JDK bin指令

    jmap: 一.调用命令示例: jmap -F-dump:format=b,file=rmsheap.bin 6086 就会在当前目录下生成rmsheap.bin的文件,6086是Pid.-F是在某些 ...

  5. 02：Sysbench基准压测（oltp_update_index.lua、oltp_update_non_index.lua）my.cnf

    目录 Sysbench 基准压测 my.cnf 一.Sysench测试前准备 1.1.压测环境 二.进行OLTP_update测试 2.1.安装压测工具sysbench 2.2.执行压测 三.执行结果 ...

  6. [C++]复制构造函数、赋值操作符与隐式类类型转换

    问题:现有类A定义如下: class A{public:        A(int a)                            //构造函数        {              ...

  7. 11.redis连接

    转自:http://www.runoob.com/redis/redis-tutorial.html Redis 客户端连接 Redis 通过监听一个 TCP 端口或者 Unix socket 的方式 ...

  8. POI-Excel表格导入和导出

    ExcelWriter /** * @author zuzhilong * @date 2013-10-10 下午08:04:02 * @desc 生成导出Excel文件对象 * @modify * ...

  9. Django xadmin的使用 （一）

    Django  xadmin的使用 xadmin是django的一个第三方的管理后台实现,它的功能比自带的admin功能更加强大. xadmin项目在github上的地址为:https://githu ...

  10. **类的起源--type

    通过type类的实例化,创建新的类. #!/usr/bin/env python # Version = 3.5.2 def func(self): print('Hello,{}'.format(s ...