首頁  >  文章  >  web前端  >  在jQuery裡使用正規表示式的圖文詳解

在jQuery裡使用正規表示式的圖文詳解

php中世界最好的语言
php中世界最好的语言原創
2018-03-30 10:58:071600瀏覽

這次帶給大家在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>

效果示範圖

#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

以正規符合單一字元的詳細解析

正則的元字元使用詳解

以上是在jQuery裡使用正規表示式的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn