[英]Validation for email or phone number for same text field in angularjs
I am working on registration form for my project in AngularJs.我正在为我在 AngularJs 中的项目编写注册表。 Users can register with his/her Email/Phone.
用户可以使用他/她的电子邮件/电话进行注册。 I need to validate that particular text-box.
我需要验证那个特定的文本框。
I have validations for both, with different text fields, with ng-pattern.我对两者都有验证,使用不同的文本字段,使用 ng-pattern。 But how can I validate for both in one text field?
但是如何在一个文本字段中验证两者?
I have updated my code, here:- enter code here
http://plnkr.co/edit/mCVxHxl2DIvqOYtVapRN?p=preview我在这里更新了我的代码:-
enter code here
http://plnkr.co/edit/mCVxHxl2DIvqOYtVapRN?p=preview
You can use a pipe '|' 您可以使用管道'|' to OR two regular expressions together:
将两个正则表达式组合在一起:
/<email-pattern>|<phone-pattern>/
so your final regex would be: 所以你的最终正则表达式是:
/^([_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,5}))|\d+$/
You can use angular form validation and ng-pattern directive for input use ng-pattern="/^(?:\\d{10}|\\w+@\\w+\\.\\w{2,3})$/"
你可以使用角形式验证和ng-pattern指令输入使用
ng-pattern="/^(?:\\d{10}|\\w+@\\w+\\.\\w{2,3})$/"
var app = angular.module("MY_APP", []); app.controller("MyCtrl", function($scope) { $scope.submitted = false; $scope.submit = function(userData){ console.log(userData) } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MY_APP"> <div ng-controller="MyCtrl"> <form name="userForm" novalidate ng-submit="userForm.$valid && submit(userData)"> <div class="errorMsg" ng-show="submitted==true && userForm.$invalid"> <ul> <li ng-show="submitted==true && userForm.emailphone.$error" class="errorMsg"> wrong format, It should be email or 10 digit mobile number </li> </ul> </div> <input type="text" name="emailphone" ng-model="userData.user" id="emailphone" required ng-pattern="/^(?:\\d{10}|\\w+@\\w+\\.\\w{2,3})$/" /> <button type="submit" ng-click="submitted = true">Submit</button> </form> </div> </div>
This code might work for you: Here is the ans of your question
<script type="text/javascript">
function validate(){
var phoneNo = document.getElementById('txtEmailormob');
var c=document.forms["myForm"]["email"].value;
var atpos=c.indexOf("@");
var dotpos=c.lastIndexOf(".");
var errorMsg = document.getElementById("errorMsg");
var successMsg = document.getElementById("successMsg");
if(phoneNo.value==""||phoneNo.value==null){
errorMsg.style.display="block";
document.getElementById("errorMsg").innerHTML = "Please enter your Mobile No or Email ";
return false;
}
if ((phoneNo.value.length < 10 || phoneNo.value.length > 10) && (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length)) {
errorMsg.style.display = "block";
successMsg.style.display = "none";
document.getElementById("errorMsg").innerHTML = " Mobile No. is not valid, Please Enter 10 Digit Mobile No or Please Enter valid Email. ";
return false;
}
successMsg.style.display = "block";
document.getElementById("successMsg").innerHTML = " Success ";
errorMsg.style.display = "none";
return true;
}
</script>
Simple code 简单的代码
Complete Working Like Validate : amazon, Facebook, uber.etc Email or Phone Number Using Single Input... 完成工作就像验证:亚马逊,Facebook,uber.etc电子邮件或电话号码使用单一输入...
Try this its working .............. 试试这个它的工作..............
<script>
$(document).ready(function () {
$("#cuntryCode").hide();
$("#useridInput").on('input', function () {
var len = $("#useridInput").val().length;
if (len >= 2) {
var VAL = this.value;
var intRegex = /^[1-9][0-9]*([.][0-9]{2}|)$/;
if (!intRegex.test(VAL)) {
$('#error-caption').html('Invalid email. Please check spelling.');
$('#error-caption').css('color', 'red');
$("#cuntryCode").hide();
} else {
if(len < 10){
$('#error-caption').html('Invalid mobile number. Please try again.');
$('#error-caption').css('color', 'red');
$("#cuntryCode").show();
}else{
$('#error-caption').html('Invalid mobile number. length must be 10 digit.');
$('#error-caption').css('color', 'red');
}
}
}else{
$("#cuntryCode").hide();
$('#error-caption').html('');
}
});
});
</script>
<form class="push--top-small forward" method="POST" data-reactid="15">
<h4 id="input-title" data-reactid="16">Welcome back
</h4>
<label class="label" id="input-label" for="useridInput" data-reactid="17">Sign in with your email address or mobile number.
</label>
<div style="margin-bottom:24px;" data-reactid="18">
<div >
<div id="cuntryCode" class="_style_4kEO6r" style="float: left; height: 44px; line-height: 44px;">
<div tabindex="0" > +241
</div>
</div>
<div style="display:flex;">
<input id="useridInput" autocorrect="off" autocapitalize="off" name="textInputValue" class="text-input" placeholder="Email or mobile number" aria-required="true" aria-invalid="false" aria-describedby="error-caption input-title">
</div>
</div>
<div id="error-caption">
</div>
</div>
<button class="btn btn--arrow btn--full" data-reactid="24">
<span class="push-small--right" data-reactid="25">Next
</span>
</button>
</form>
guys here is the Regex for email or phone number Please have look I hope it's helpful.伙计们,这里是电子邮件或电话号码的正则表达式 请看看我希望它有帮助。
Thanks谢谢
^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|(^[0-9]{10})+$
Here is an example as well.这里也是一个例子。
https://jsfiddle.net/sanat/b2m436L5/17/ https://jsfiddle.net/sanat/b2m436L5/17/
function validate(){ var value = $("#email_phone").val(); var regex = new RegExp('^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})|(^[0-9]{10})+$'); if(value){ if(!regex.test(value)){ $("#error").text("Please enter valid email address or phone number.") }else{ $("#error").text('') } }else{ $("#error").text('This field is required.') } }
body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } #error{ font-size:14px; color:red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <div> <input type="text" placeholder="Email/phone" id="email_phone"> <button onClick="validate()">Submit</button> </div> <span id="error"></span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.