如何使用Angular.js/Javascript爲網址添加輸入字段驗證

Question

我需要一個幫助。我需要驗證URL的輸入字段。我在下面解釋我的代碼。

<div class="input-group bmargindiv1 col-md-12"> 
<span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px" id="identitylabel">Website URL:</span> 
<input type="text" name="url" id="weburl" class="form-control oditek-form" placeholder="Add Website URL" ng-model="url" ng-keypress="clearField('weburl');"> 
</div> 

這裏現在我可以進入任何format.suppose用戶的任何URL正在進入一個URL像www.angon.com那麼就應該拋出驗證錯誤添加http/https在URL的開始。請幫助我。

Answer 1

您可以簡單地在您的輸入字段中使用add type="url"，這樣就可以驗證輸入字段的值，並通過驗證其有效URL是否會在輸入字段上添加ng-invalid類。

標記

<input type="url" name="url" id="weburl" 
    class="form-control oditek-form" placeholder="Add Website URL" 
    ng-model="url" ng-keypress="clearField('weburl');"/> 

參考例子： - https://docs.angularjs.org/api/ng/input/input%5Burl%5D

NG模式「 - https://docs.angularjs.org/api/ng/directive/ngPattern