来自《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. 【转】【备忘录】MySQL性能优化的21个最佳实践 和 mysql使用索引

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...

  2. saiku迁移至mysql步骤

    saiku数据库的表和用户默认创建是在启动项目的时候,通过初始化 saiku-beans.xml 中的 h2database 这个bean执行org.saiku.service.Database类的i ...

  3. CentOS 7 named配置forward

    上文在CentOS 7中安装配置了bind.有时我们只需要一个DNS的proxy来转发DNS的请求.这时,我们就需要配置forword. forword在named.conf中的添加: forward ...

  4. FPGA时序约束一点总结

    时序约束的一点总结. 打拍.掌握好时序. 手动分配位置,这个不是一定有效. 打破层级或者物理综合,或者自动加流水等综合优化参数调整. 根据实际情况使用异步时钟策略. 换速度更快的片子. 最也进接手一个 ...

  5. TCP/IP网络编程系列之二（初级）

    套接字类型与协议设置 我们先了解一下创建套接字的那个函数 int socket(int domain,int type,int protocol);成功时返回文件描述符,失败时返回-1.其中,doma ...

  6. (转)Inno Setup入门（四）——为程序创建桌面快捷方式

    本文转载自:http://blog.csdn.net/augusdi/article/details/8564810 Icons这一可选段定义所有创建在开始菜单和\或其它位置 (比如桌面) 的快捷方式 ...

  7. 使用Java读取配置文件

    实现起来,相对比较简单,留个备案吧,废话也不多说,请看代码: package com.jd.***.config; import org.junit.*; import java.io.IOExcep ...

  8. Mac运维安装软件

    Maccrt软件 sudo spctl --master-disable 打开软件,复制到app,按照sn.txt输入即可 sudo spctl --master-enable crt快捷键crtl ...

  9. 学生党成功拿到阿里技术offer：面Java开发，却是C++考官，几个意思？

    摘要: 这是我为大家分享的如何拿到阿里技术offer系列文章中的第一篇,今天分享的文章的作者是一位在2015年阿里的校招中成功得到offer的美女学姐,从学姐的这篇文章中我们能学到很多在阿里面试的宝贵 ...

  10. 在单板上使用WIFI网卡的固件问题

    (在单板上使用WIFI网卡的固件问题)(我的wifi网卡是RT3070) (一般买的网卡说是支持LINUX免驱的话,那么在/lib/firmware/ 下一定有相应的固件) 我将USB网卡接入UBUN ...