使用自定義正則表達式來驗證表單

我想驗證表單使用我的自定義數據屬性，但不知道如何做到這一點。如果需要，我還想在數據屬性中顯示錯誤消息。使用自定義正則表達式來驗證表單

我正在查找與數據屬性中的正則表達式值相匹配的JavaScript，並將其與相應的輸入值進行匹配。

我有以下形式..

<form id="loginForm" name="loginForm"> 
        <ul> 
         <li> 
          <label for="Username">Username:</label> 
          <input type="email" data-validation-error="Please enter a username" data-validation-use="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" id="username" name="username" maxlength="254" class="required" /> 
         </li> 
         <li> 
          <label for="Password">Password:</label> 
          <input type="password" data-validation-error="Please enter a password" data-validation-use="^[a-zA-Z]\w{5,12}$" id="password" name="password" value="" maxlength="12" class="required" /> 
         </li> 
        </ul> 
        <input type="submit" value="Login" class="button" name="loginBtn" id="loginBtn" /> 
      </form>

來源

2011-12-20 TLD

如果你正在爲新版瀏覽器開發而已，你可以使用一些不錯的功能，此：

列表itemUse輸入型電子郵件作爲用戶名字段。瀏覽器將負責驗證。使用屬性需要。瀏覽器不會讓用戶在現場沒有價值的情況下提交。使用模式。瀏覽器不會讓用戶提交沒有匹配給定模式的值。 Altough，與電子郵件的類型，你可以跳過可怕的正則表達式匹配你的電子郵件:)

退房pattern屬性： http://www.the-art-of-web.com/html/html5-form-validation/#section_6

例子：

<input type="email" required />

在這裏，你可以檢查出在最常用的瀏覽器中支持現代表單功能： http://caniuse.com/#feat=forms

有一個正在進行的鐵餅如果應該可以指定和設置錯誤消息的樣式（由瀏覽器處理），那麼它就是sion。至於現在，我不認爲可以設計驗證消息的樣式。如果這些消息在所有頁面上都是相同的，那麼也許它更加用戶友好？

如果您需要支持舊瀏覽器，則必須在每個字段上放置JavaScript事件處理程序，從數據屬性中提取正則表達式並將其與值進行匹配。請記住，客戶端驗證不能替代服務器端驗證 - 這僅僅是爲了用戶方便。因此，對於那些支持瀏覽器的人來說，HTML5驗證可能足夠好 - 其餘的仍然會依賴服務器端驗證，altought的用戶體驗不會那麼好。

這個例子顯示瞭如何可以做到（我沒有測試過這非常好：O）：

$('form').submit(function(){ 
    var isValid = true; 
    $(this).find(':input').each(function(){ 
     var regex = new RegExp($(this).attr('data-validation-use')); 
     if(!regex.exec($(this).val())){ 
      $('.validationError').append($(this).attr('data-validation-error')); 
      $(this).addClass('invalid'); 
      isValid = false; 
     } 
    }); 
    return isValid; 
});

來源

2011-12-20 12:20:53

我將需要支持舊瀏覽器，所以我可能不包括僅HTML5驗證。我需要使用data屬性，如我的代碼中所示的那樣，因此理想地尋找正則表達式的答案。 – TLD 2011-12-20 12:53:16

此外，我設法從數據屬性中提取正則表達式，但我不確定如何將它與輸入字段進行匹配。這一點的Javascript是我正在尋找的。 – TLD 2011-12-20 12:59:07

jQuery驗證將是最好的。請參閱此處的標準jQuery驗證演示和代碼。 jQuery Validation

來源

2011-12-20 12:36:51

使用自定義正則表達式來驗證表單

回答

相關問題