来自《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. webdriver常用API

    本章涉及Selenium WebDriver的所有接口. Recommended Import Style 推荐的导入风格如下: from selenium import webdriver 然后,你 ...

  2. [DP题]最长上升子序列

    最长上升子序列 总时间限制:2000ms 内存限制:65536kB 描述 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的.对于给定的一个序列( ...

  3. pull同步远程仓 笔记

    一.远程仓库删除文件 远程仓 1.py 本地仓 1.py  2.py pull后 本地仓 1.py 这里的2.py 是没有改动过的情况,如改动了要解决冲突的,见:https://www.cnblogs ...

  4. Go - 类型与变量

    类型 Go 语言中的类型与其他语言类似,比较特殊的有以下几个: bool 类型 - 它的值只能是 true 与 false. int / uint - 它们的长度会根据操作系统的不同(32/64 bi ...

  5. 【洛谷】P1388 算式（dp）

    题目描述 给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就是N-1个了,所以恰好每两个相邻数字之间都有一个符号.例如: N ...

  6. 0007-一套完整的CRUD_DEMO

    好久没写了,一直在忙别的东西,但是想想,还是把之前的补充完整好了.给大家一个参考,也为自己留个备份. 首先写一个Html作为内容载体,主要结构如下 <div ui-view="navb ...

  7. Vue基础知识之指令和生命周期（一）

    优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...

  8. 修改tomcat端口后不能IP访问问题

    当tomcat端口被修改以后使用IP访问会发生404的问题,只能通过localhost进行访问,当别人想访问你tomcat下的工程时就会访问失败,此时修改eclipse下的tomcat中的server ...

  9. mac下mysql5.7.18修改root密码

    参考:http://blog.csdn.net/lijilong_/article/details/70991809 第一步:苹果->系统偏好设置->最下面点MySQL,关闭mysql服务 ...

  10. java设计模式之责任链模式（Chain of Responsibility）

    转自:http://www.cnblogs.com/java-my-life/archive/2012/05/28/2516865.html 在阎宏博士的<JAVA与模式>一书中开头是这样 ...