本文是一篇关于jquery使用正则来验证输入,及一些常用验证规则的基础文章,适合新手。

假设我们的网页里有这样的一个表单:

<input id="aijquery" type="text">
<button id="btn">验证</button>

1.验证用户输入的只能是英文和数字:

$("#btn").click(function(){
var $aijquery=$("#aijquery");
if(!/^[a-z0-9]+$/ig.test($aijquery.val())){
alert("只能数字和英文");
}
});

2.验证用户输入只能为数字,并且如果是小数的话,最多只能是两位小数:

$("#btn").click(function(){
var v=$("#aijquery").val();
if(!/^\d+(?:\.\d{0,2})?$/.test(v).test(v)){
alert("只能为数字,并且如果是小数的话,最多只能是两位小数");
}
});

3.验证电子邮箱:

$("#btn").click(function(){
var v=$("#aijquery").val();
if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(v).test(v)){
alert("请输入正确的电子邮箱");
}
});

4.验证汉字:

$("#btn").click(function(){
var v=$("#aijquery").val();
if(!/^[\u4e00-\u9fa5]+$/.test(v).test(v)){
alert("请输入汉字");
}
});

5.判断是否为整数,可以为0:

$("#btn").click(function(){
var v=$("#aijquery").val();
if(!/^0$|^[1-9]\d*$/.test(v).test(v)){
alert("请输入整数");
}
});

  

下面是例子:

<!doctype html>
<html lang="en">
<head>
<title>jquery里常用正则的方法及演示-aijQuery.cn</title>
<script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<DIV class="container-fluid">
<input id="aijquery" type="text">
<button id="btn">验证</button>
</DIV>
<script language="javascript">
$("#btn").click(function(){
var v=$("#aijquery").val();
//if(!/^[a-z0-9]+$/ig.test(v)){alert("只能数字和英文");}
//if(!/^\d+(?:\.\d{0,2})?$/.test(v)){alert("只能为数字,如果有小数,最多只能两位!");}
//if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(v)){alert("请输入正确的电子邮箱");}
//if(!/^[\u4e00-\u9fa5]+$/.test(v)){alert("请输入汉字");}
if(!/^0$|^[1-9]\d*$/.test(v)){alert("请输入整数");}
}); </script>
</body>
</html>

出处:http://www.aijquery.cn

jquery里正则的使用方法及常用的正则验证的更多相关文章

  1. jquery里互为逆过程的方法

    jquery里互为逆过程的方法reverse 在jquery里,有不少互为逆过程的方法,如parent()与children(),parents()与find(),first()和last()等,这些 ...

  2. js模仿jquery里的几个方法parent, parentUntil, children

    有时工作需要, 也是接着上一章的方法, 用js模仿jquery里的几个方法parent, parentUntil, children. function parent(node){ return no ...

  3. JQuery新闻滚动的实现方法(常用笔记1)

    .mouseover() //经过子元素也会触发 .mouseenter() //经过被选元素才会触发 .mouseout() //离开子元素也会触发 .mouseleave() //离开被选元素才会 ...

  4. js模仿jquery里的几个方法next, pre, nextAll, preAll

    /*siblings函数, 选取node的所有兄弟节点*/ function siblings(node){ if(node.nodeType === 1){ node.flag = true; // ...

  5. PHP基础语法: echo,var_dump, 常用函数:随机数:拆分字符串:explode()、rand()、日期时间:time()、字符串转化为时间戳:strtotime()可变参数的函数:PHP里数组长度表示方法:count($attr[指数组]);字符串长度:strlen($a)

    PHP语言原理:先把代码显示在源代码中,再通过浏览器解析在网页上 a. 1.substr;  //用于输出字符串中,需要的某一部分 <?PHP $a="learn php"; ...

  6. 两种常用的jquery事件加载的方法 的区别

    两种常用的jquery事件加载的方法   $(function(){});  window.onload=function(){}  第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...

  7. jquery里判断数组内是否包含了指定的值或元素的方法

    本文讲的是在jquery里,如何判断一个数组里是否包含了指定的值,变量,或其它对象元素的方法. 在jquery里,我们可以用$.inArray来判断一个数组里是否包含了指定的值或其它对象元素,来看一个 ...

  8. jquery里把数组转换成json的方法

    首先来看,jquery里自带的,和json相关的函数: 1.$.parseJSON  :  用来解析JSON字符串,返回一个对象. 什么叫“JSON字符串”? 比如: var a={name:&quo ...

  9. js(jQuery)获取时间的方法及常用时间类搜集

    获取时间的方法及常用时间类都是大家经常使用的,在本文为大家整理了一些,个人感觉还比较全,感兴趣的朋友可以收集下   复制代码代码如下: $(function(){ var mydate = new D ...

随机推荐

  1. how to remote debug in vs 2013

    first download the debugger tools "rtools_setup_x64" start C:\Program Files\Microsoft Visu ...

  2. 类似gitlab代码提交的热力图怎么做?

    本文由  网易云发布. 作者:张淞(本篇文章仅限知乎内部分享,如需转载,请取得作者同意授权.) 昨夜,网易有数产品经理路过开发的显示屏前见到了类型这样的一张图: 于是想到有数能不能做出这样的图来?作为 ...

  3. 73. 矩阵置零 leetcode JAVA

    题目: 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [   [1,1,1],   [1,0,1],   [1,1,1] ...

  4. linux网络流量实时监控工具之iptraf 【个人比较喜欢用的流量监控软件】

    linux网络流量实时监控工具之iptraf IPTraf是一个网络监控工具,功能比nload更强大,可以监控所有的流量,IP流量,按协议分的流量,还可以设置过滤器等,如下图 对监控网络来说,这个更适 ...

  5. java学习笔记—web计算器(36)

    MVC模式 模式主要的任务是帮助开发者解决一类问题. MVC模式主要是用于规划你的网站的开发的一个基本的结构. Servlet记住充当的是控制器层.cn.itcast.controller Java类 ...

  6. elasticsearch 5.6.4自动创建索引与mapping映射关系 +Java语言

    由于业务上的需求 ,最近在研究elasticsearch的相关知识 ,在网上查略了大部分资料 ,基本上对elasticsearch的数据增删改都没有太大问题 ,这里就不做总结了  .但是,在网上始终没 ...

  7. item pipeline 实例:爬取360摄像图片

    生成项目 scrapy startproject image360 cd Image360 && scrapy genspider images  images.so.com 一. 构 ...

  8. SpringMvc @RequestMapping原理

    讲这个之前,我们得先知道在SpringMvc启动时,会加载所有的Bean类,就是加了@Controller,@Component等组件标识的类,然后会把@RequestMapping的方法也加入到一个 ...

  9. Jmeter Plugins----- Transactions per Second 配置项

    Jmeter Plugins---version 0.5.5 官方解释: Transactions per Second since 0.3.0 This graph shows the number ...

  10. Nginx的反向代理和负载均衡

    1 Nginx的反向代理 1.1 什么是反向代理 正向代理 反向代理: 反向代理服务器是引用在服务端.决定哪台服务器提供服务. 1.2 反向代理的模拟 1.2.1 反向代理 应该有一个nginx服务器 ...