angular.js - 輸入郵箱地址之后， 如何使其自動在末尾添加分號？

問題描述

1: 我有這樣一個需求： 在郵箱輸入框里面要輸入N個地址， 這N個郵箱之間必須要使用分號隔開才行2：能否通過angularJS 或者其他方法驗證輸入的N個郵箱地址是分隔好的， 能夠正確發送郵件的？3：或者能夠判斷這這些郵箱是否沒有被分隔， 然后能讓我據此提出提示框信息？4：或者在輸入地址之后自動判斷，然后自動加上分號。

問題解答

你可以做一個類似tag-input的東西,在回車輸入的時候去驗證輸入內容是否符合郵件格式標準，驗證成功就add進去，驗證失敗就提示詳細消息,這樣能避免在用戶全部輸入完后再去驗證，能保證輸入的內容就是通過驗證后的

回車輸入

HTML

<p class='form-group'> <p class='form-group'> <input type='text' tag-input='primary' value='Amsterdam,Washington,Sydney,Beijing,Cairo' data-role='tagsinput' placeholder='Add Tag'> </p></p>

Directive

angular.module(’BlurAdmin.pages.form’) .directive(’tagInput’, tagInput); /** @ngInject */ function tagInput() { return { restrict: ’A’, link: function( $scope, elem, attr) {$(elem).tagsinput({ tagClass: ’label label-’ + attr.tagInput}); } }; }回答2：

非常感謝 @crazy4x 的解答： 后來我自己找到一個新的方法：

目標： 輸入框輸入多個郵箱地址的時候，檢驗N個郵箱地址是否正確并給出提示方法：

HTML: <form role='form' name='custom_form' novalidate>

<p class='form-group'> <label class='col-sm-2 control-label'>email address</label> <p ng-class='{’has-error’:custom_form.user_email.$invalid&&custom_form.user_email.$dirty}'><input multiple-email name='user_email' ng-model='user.email' required placeholder='seperate the multiple mails with '/> 驗證通過：{{custom_form.user_email.$valid}} </p></p><p class='form-group text-center'> <input ng-disabled='custom_form.$invalid' type='submit' value='提交' /></p> </form>

Js:(Angular)

app.directive(’multipleEmail’, [function () {return { require: 'ngModel', link: function (scope, element, attr, ngModel) {if (ngModel) { var emailsRegexp =/^([a-z0-9!#$%&’*+/=?^_`{|}~.-]+@[a-z0-9-]+(.[a-z0-9-]+)*[;；]?)+$/i;}var customValidator = function (value) { var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value); ngModel.$setValidity('multipleEmail', validity); return validity ? value : undefined;};ngModel.$formatters.push(customValidator);ngModel.$parsers.push(customValidator); }}; }]);