javascript - 如何使用 Angular.js/Javascript 为 url 添加输入字段验证

标签 javascript angularjs html

我需要一个帮助。我需要验证 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>

现在我可以输入任何格式的任何 URL。假设用户正在输入一个 URL,例如 www.angon.com 那么它应该抛出验证错误以添加http/httpsURL 的开头。请帮助我。

最佳答案

您可以简单地使用添加 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

关于javascript - 如何使用 Angular.js/Javascript 为 url 添加输入字段验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35813696/

相关文章:

angularjs - 在使用其他方式时如何以 Angular 获取请求的路线

html - css 最后一个 ul 样式

javascript - 两次编辑本地存储项返回未定义

javascript - 如何使用 D3(或只是 javascript)将表单选项设置为 "selected"

javascript - CSS animations - 当前用 CSS 表示的 "left"

javascript - 如何在没有 $scope 的情况下使用 $setValidity 设置输入验证

javascript - 根据 Angular 1.5 中的数组长度启用/禁用输入字段

jquery - 如何使这个消失/重新出现的 AJAX 加载 GIF 停止移动其他元素?

css - 填充底部不起作用。我在 chrome 浏览器中测试

javascript - 我怎么能用 jQuery 说 "if width > height"然后 "do this"?