使用ng-pattern驗證AngularJS中的電子郵件

我是Angular的新手，無法通過ng-pattern驗證基於REGEX的電子郵件地址。實際上，電子郵件的其他默認角度驗證也會更改行爲，並且只有在插入ng模式時整個字段爲空時纔會顯示錯誤。最初嘗試使用指令和控制器，但發現ng-pattern可以實現（理論上）與驗證電子郵件的效果相同，因此決定使用它。使用ng-pattern驗證AngularJS中的電子郵件

我已經使用了幾個REGEX模式，並閱讀ng模式，如：Regex validation of ng-pattern Form validation Easy form validation和許多其他鏈接，但沒有任何工作。任何人都可以弄清楚我需要做什麼才能使事情發揮作用？

<form name="userForm" novalidate> 
    <div class="row"> 
        <div class="large-12 medium-12 small-12 columns"> 
         <label>Username</label> 
          <input type="email" name="username" placeholder="[email protected]" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern = "/^(?("")("".+?(?<!\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'*\+/=\?\^`\{\}\|~\w])*)(‌?<=[0-9a-z])@))(?([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-‌z0-9][\-a-z0-9]{0,22}[a-z0-9]))$/" required /> 
          <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$invalid"> 
           <small class="error" ng-show="userForm.username.$error.required"> 
            Your email is required. 
           </small> 
           <small class="error" ng-show="userForm.username.$error.email"> 
            Please input a valid email. 
           </small> 
           <small class="error" ng-show="userForm.firstname.$error.maxlength"> 
            Your email cannot be longer than 100 characters 
           </small>       
          </div> 
        </div> 
</form>

來源

2016-02-11 Afshin Ghazi

這個怎麼？：http://stackoverflow.com/questions/46155/validate-email-address-in-javascript – jmunsch

這http://html5pattern.com/Emails – agriboz

謝謝，但也讀了。我真的很想知道如何使它與ng-pattern一起工作，因爲它應該添加相同的功能，但更容易。在你的情況下，我將不得不添加功能到控制器或指令和和 –

請改變你的NG-模式來匹配這個表達式：

ng-pattern = '/^(([^<>()\[\]\.,;:\[email protected]\"]+(\.[^<>()\[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\[email protected]\"]+\.)+[^<>()[\]\.,;:\[email protected]\"]{2,})$/i'

此正則表達式將如果部分給錯誤@後留空。這個正則表達式也將接受unicode。

希望它有幫助。

來源

2016-02-11 06:24:27

你的正則表達式有錯誤。我想你還沒有逃過你的角色之一。 –

是不加單引號而不是雙引號。將接受你的答案，因爲它也可以。 –

需要指出的問題。我更新了我的答案。 –

正則表達式存在錯誤。我用這個簡單的電子郵件驗證，並與一些變化工作得很好，以顯示正確的錯誤

<div class="row"> 
    <div class="large-12 medium-12 small-12 columns"> 
     <label>Username</label> 
      <input type="email" name="username" placeholder="[email protected]" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern="/^[a-z]+[a-z0-9._][email protected][a-z]+\.[a-z.]{2,5}$/" required /> 
      <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error"> 
      <small class="error" ng-show="userForm.username.$error.required"> 
        Your email is required. 
      </small> 
      <small class="error" ng-show="userForm.username.$error.pattern"> 
        Please input a valid email. 
      </small> 
      <small class="error" ng-show="userForm.username.$error.maxlength"> 
        Your email cannot be longer than 100 characters 
      </small>       
      </div> 
    </div> 
</div>

來源

2016-02-11 06:15:58

感謝您的回答。我曾嘗試過許多不同的正則表達式，但沒有設法使其正常工作。隨着你的功能改進，但「..」（多個後續點）仍然沒有照顧，並且在你的正則表達式中，電子郵件中不允許有破折號。 –

問題出在我的正則表達式中。我最終使用：ng-pattern='/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />

來源

2016-02-11 07:14:04

使用ng-pattern驗證AngularJS中的電子郵件

回答

相關問題