快捷導(dǎo)航

jQuery正則表達(dá)式驗(yàn)證表單代碼演示

更新時(shí)間：2024年05月13日 08:41:03 作者：花落殘?jiān)聲r(shí)

這篇文章主要給大家介紹了關(guān)于jQuery正則表達(dá)式驗(yàn)證表單的相關(guān)資料,我們?cè)趯?xiě)表單的時(shí)候會(huì)通過(guò)一些正則表達(dá)式來(lái)驗(yàn)證是否正確,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

簡(jiǎn)介：

jQuery Form插件是一個(gè)優(yōu)秀的Ajax表單插件，可以非常容易地、無(wú)侵入地升級(jí)HTML表單以支持Ajax。jQuery
Form有兩個(gè)核心方法 – ajaxForm() 和 ajaxSubmit()，
它們集合了從控制表單元素到?jīng)Q定如何管理提交進(jìn)程的功能。另外，插件還包括其他的一些方法：
formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()
和 resetForm()等。

什么是正則表達(dá)式以及作用：

正則表達(dá)式，又稱規(guī)則表達(dá)式,（Regular
Expression，在代碼中常簡(jiǎn)寫(xiě)為regex、regexp或RE），是一種文本模式，包括普通字符（例如，a 到 z
之間的字母）和特殊字符（稱為"元字符"），是計(jì)算機(jī)科學(xué)的一個(gè)概念。

正則表達(dá)式中的括號(hào)()主要有兩個(gè)作用：分組和捕獲。

分組：在正則表達(dá)式中，括號(hào)可以用來(lái)將一些字符組合在一起，形成一個(gè)分組。這通常用于確定優(yōu)先級(jí)、重復(fù)次數(shù)或特殊的匹配規(guī)則。例如，(ab)可以將字符a和b組合在一起作為一個(gè)整體進(jìn)行匹配。
捕獲：當(dāng)正則表達(dá)式中的括號(hào)內(nèi)匹配到特定的文本時(shí)，可以將這些文本保存下來(lái)，以便后續(xù)使用。捕獲的內(nèi)容可以用于替換操作或者在其他正則表達(dá)式中進(jìn)行引用。例如，在替換操作中，可以使用\1來(lái)引用第一個(gè)捕獲的內(nèi)容。

●文本框內(nèi)容的驗(yàn)證：

1、實(shí)現(xiàn)思路

2、使用 String 對(duì)象的 length 屬性驗(yàn)證密碼的長(zhǎng)度

3、驗(yàn)證兩次輸入密碼是否一致

4、使用 length 屬性獲取文本長(zhǎng)度，然后使用 for 循環(huán)和 substring ( ) 方法依次截?cái)鄦蝹€(gè)字符，最后判斷每個(gè)字符是否是數(shù)字

標(biāo)簽	描述
form	定義供用戶輸入的表單
input	定義輸入域
textarea	定義文本域 (一個(gè)多行的輸入控件)
label	定義了 input 元素的標(biāo)簽，一般為輸入標(biāo)題
fieldset	定義了一組相關(guān)的表單元素，并使用外框包含起來(lái)
legend	定義了 fieldset 元素的標(biāo)題
select	定義了下拉選項(xiàng)列表
optgroup	定義選項(xiàng)組
option	定義下拉列表中的選項(xiàng)
button	定義一個(gè)點(diǎn)擊按鈕

代碼演示示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>

  .over { font-size: large; font-style: italic; }
  .out { font-size: small; }
</style>
<body>

<div id="display">demo</div>
<div id="test">

</div>

<form id="theForm">
  輸入字符
  <div>
    <input type="text" id="username" onblur="isString(this.value)">
  </div>
  輸入正確的數(shù)字
  <div>
    <input type="text" id="password" onblur="isInteger(this.value)">
  </div>
  輸入正確的電話
  <div>
    <input type="text" id="telephone" onblur="isTelephone(this.value)">
  </div>
  確移動(dòng)電話
  <div>
    <input type="text" id="mobile" onblur="isMobile(this.value)">
  </div>
  郵箱地址
  <div>
    <input type="text" id="email" onblur="isEmail(this.value)">
  </div>
  inernet地址
  <div>
    <input type="text" id="uri" onblur="isUri(this.value)">
  </div>
  <div>
    <input type="button" value="Validata" onclick="return validata();">
  </div></form>
<script src="../jQuery/jquery-1.12.4.js"></script>
<script>
  function validata() {
    if ($("#username").val() == "") {
      alert("請(qǐng)輸入名字");
      return false;
    }
    if ($("#password").val() == "") {
      alert("請(qǐng)輸入密碼");
      return false;
    }
    if ($("#telephone").val() == "") {
      alert("請(qǐng)輸入電話號(hào)碼");
    }
    if ($("#email").val() == "") {
      $("#email").val("shuangping@163.com");
    }
  }
  function isInteger(obj) {
    reg = /^[-+]?\d+$/;
    if (!reg.test(obj)) {
      $("#test").html("<b>Please input correct figures</b>");
    } else {
      $("#test").html("");
    }
  }
  function isEmail(obj) {
    reg = /^\w{3,}@\w+(\.\w+)+$/;
    if (!reg.test(obj)) {
      $("#test").html("<b>請(qǐng)輸入正確的郵箱地址</b>");
    } else {
      $("#test").html("");
    }
  }
  function isString(obj) {
    reg = /^[a-z,A-Z]+$/;
    if (!reg.test(obj)) {
      $("#test").html("<b>只能輸入字符</b>");
    } else {
      $("#test").html("");
    }
  }
  function isTelephone(obj) {
    reg = /^(\d{3,4}\-)?[1-9]\d{6,7}$/;
    if (!reg.test(obj)) {
      $("#test").html("<b>請(qǐng)輸入正確的電話號(hào)碼！</b>");
    } else {
      $("#test").html("");
    }
  }
  function isMobile(obj) {
    reg = /^(\+\d{2,3}\-)?\d{11}$/;
    if (!reg.test(obj)) {
      $("#test").html("請(qǐng)輸入正確移動(dòng)電話");
    } else {
      $("#test").html("");
    }
  }
  function isUri(obj) {
    reg = /^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
    if (!reg.test(obj)) {
      $("#test").html($("#uri").val() + "請(qǐng)輸入正確的inernet地址");
    } else {
      $("#test").html("");
    }
  }
  //document加載完畢執(zhí)行
  $(document).ready(function() {
    // do something here
    //隔行換色功能
    $("p").each(function(i) {
      this.style.color = ['red', 'green', 'blue', 'black'][i % 2]
    });
    //eq(2)獲取$("p")集合的第3個(gè)元素
    $("p").eq(2).click(function() {
      $("#display").css("color", "blue")
    });
    //所有test中的p都附加了樣式"over"。
    $("#test>p").addClass("over");
    //test中的最后一個(gè)p附加了樣式"out"。
    $("#test p:last").addClass("out");
    //選擇同級(jí)元素還沒(méi)看懂
    //$('#faq').find('dd').hide().end().find('dt').click(function()
    //選擇父級(jí)元素
    $("a").hover(function() {
        $(this).parents("p").addClass("out")
      },
      function() {
        $(this).parents("p").removeClass("out")
      })
    //hover鼠標(biāo)懸停效果，toggle每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù) ,
    //trigger(eventtype): 在每一個(gè)匹配的元素上觸發(fā)某類事件,
    //bind(eventtype,fn)，unbind(eventtype): 事件的綁定與反綁定從每一個(gè)匹配的元素中（添加）刪除綁定的事件。
    //方法的連寫(xiě)
    $("#display").hover(function() {
        $(this).addClass("over");
      },
      function() {
        $(this).removeClass("over");
      }).click(function() {
      alert($("#display").text())
    });

  });

</script>
</body>
</html>