欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

在jQuery里使用正则表达式的图文详解

程序员文章站 2022-05-21 11:13:22
...
这次给大家带来在jQuery里使用正则表达式的图文详解,在jQuery里使用正则表达式的注意事项有哪些,下面就是实战案例,一起来看一下。

基础正则

1、正则表达式的创建

a) var checkNum = /^[A-Za-z0-9]+$/;
b) var re=new RegExp(“["+s1+"]“,”g”);

2、常用规则

a) 用户密码:/^[a-zA-Z][a-zA-Z0-9_]{5,20}$/
b) 邮件:/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
c) 手机:/^[\d]{5,20}$/
d) 其它常用验证:请百度

3、方式:test

案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jquery ajax</title>
  <script type="text/javascript" src="public/js/jquery-2.2.3.min.js"></script>
</head>
<body>
<form action="">
  <label>用户名:</label><span id="check_username">检测</span>
  <input type="text" id="t_username" placeholder="请输入"/>
  <hr/>
  <label>邮箱:</label><span id="check_email">检测</span>
  <input type="text" id="t_email" placeholder="请输入"/>
  <hr/>
  <label>手机:</label><span id="check_phone">检测</span>
  <input type="text" id="t_phone" placeholder="请输入"/>
  <hr/>
</form>
</body>
<script>
  $(function () {
    // 用户名
    $("#check_username").click(function(){
      var str = $("#t_username").val();
      var ret = /^[a-zA-Z][a-zA-Z0-9_]{5,20}$/;
      if(ret.test(str)){
        alert('ok');
      }else{
        alert('wrong');
      }
    });
    // 邮件
    $("#check_email").click(function(){
      var str = $("#t_email").val();
      var ret = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if(ret.test(str)){
        alert('ok');
      }else{
        alert('wrong');
      }
    });
    // 手机
    $("#check_phone").click(function(){
      var str = $("#t_phone").val();
      var ret = /^[\d]{5,20}$/;
      if(ret.test(str)){
        alert('ok');
      }else{
        alert('wrong');
      }
    });
  });
</script>
</html>

效果演示图

在jQuery里使用正则表达式的图文详解

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

用正则匹配单个字符的详细解析

正则的元字符使用详解

以上就是在jQuery里使用正则表达式的图文详解的详细内容,更多请关注其它相关文章!