来自《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. 贴几个erlang文档站点

    国外三方的文档,比较全, http://erldocs.com/ 这个貌似是国内的版本,不是很新 http://erldoc.com/ 国内dhq大神的,也不是很新 http://dhq.me/erl ...

  2. Hibernate学习9—检索策略

    本章,采用Class和Student     ——  1 对 多的关系: Student.java: package com.cy.model; public class Student { priv ...

  3. SpringMVC之八：基于SpringMVC拦截器和注解实现controller中访问权限控制

    SpringMVC的拦截器HandlerInterceptorAdapter对应提供了三个preHandle,postHandle,afterCompletion方法. preHandle在业务处理器 ...

  4. 字体相关CSS属性介绍

    font-family 字体系列. font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. 简单实例: bod ...

  5. HTML5的离线存储有几种方式？

    localStorage长期存储数据,浏览器关闭后数据不丢失: sessionStorage数据在浏览器关闭后自动删除.

  6. scrapy核心组件工作流程和post请求

    一 . 五大核心组件的工作流程 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事务(框架核心) 调度器(Scheduler)用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返 ...

  7. 使用C#书写SQLite数据库增删改查语句（以及插入byte[]时遇到的问题总结）

    在没有使用SQLite这种轻量级的数据库之前,只使用过Sqlserver2008进行数据的增删改查,公司使用的是大型的ORACLE数据库,还没有真正的会使用它.那时候觉得数据库很庞大,然而遇到SQLi ...

  8. Dijkstra 调度场算法 Python实现 一

    调度场算法(Shunting Yard Algorithm)是一个用于将中缀表达式转换为后缀表达式的经典算法,由 Edsger Wybe Dijkstra 引入,因其操作类似于火车编组场而得名.  — ...

  9. 使用Vagrant创建多节点虚拟机集群

    摘要: 在前一篇博客中,我介绍了使用Vagrant快速创建虚拟机,但是所创建的只是单个虚拟机.这篇博客将介绍使用Vagrant创建多节点虚拟机集群,可以作为Hadoop,Spark以及Storm等分布 ...

  10. 跟着太白老师学python 10day 函数的动态参数 *args， **kwargs， 形参的位置顺序

    1. *args 接收实参的位置参数, **kwargs接收实参的关键字参数 def func(*args, **kwargs): print(args, kwargs) func(1, 2, 3, ...