来自《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. ftp之心脏病

    FTP基础 FTP只通过TCP连接,没有用于FTP的UDP组件.FTP不同于其他服务的是它使用了两个端口, 一个数据端口和一个命令端口(或称为控制端口).通常21端口是命令端口,20端口是数据端口.当 ...

  2. IOCP结合AcceptEx实例

    在普通IOCP的基础上注意两点: 1.记得把监听socket绑定到端口 2.在Accept处理过程中,抛出接受连接的AcceptEx请求,绑定客户端socket到端口和抛出recv请求 客户端要断开连 ...

  3. Svg 和 canvas的区别

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  4. Docker垃圾回收机制

    由Docker垃圾回收机制引发的一场血案 AlstonWilliams 关注 2017.04.01 19:00* 字数 1398 阅读 253评论 0喜欢 0 今天早晨,在我还没睡醒的时候,我们团队中 ...

  5. question？

  6. 异步编程之co——源码分析

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  7. Java Servlet调用数据库复习

    首先要导入jar包. 剩下的基本就是模版式的代码了: public class main { // JDBC 驱动名及数据库 URL static final String JDBC_DRIVER = ...

  8. leetcode572

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  9. 「小程序JAVA实战」小程序的基础组件（24）

    转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/ ...

  10. 关于c3p0 ResourcePoolException: Attempted to use a closed or broken resource pool

    转自:https://blog.csdn.net/u011404265/article/details/52848603 springmvc-servlet.xml加入 <property na ...