“HTML5를 사용하면 사용자의 입력이 유효한 이메일 또는 URL 주소인지 확인하기 위해 더 이상 js 또는 서버 측 코드가 필요하지 않습니다.”
사용자가 입력 한 후 이메일을 확인하려면 어떻게해야합니까? 사용자가 잘못된 형식의 이메일 주소를 입력 한 경우 JS없이 메시지를 표시하는 방법.
<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">답변
HTML5에서는 다음과 같이 할 수 있습니다.
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>사용자가 제출을 누르면 다음과 같은 오류 메시지가 자동으로 표시됩니다.
답변
www.w3.org 사이트 의 input type=email페이지 는 이메일 주소가 다음 정규식과 일치하는 문자열임을 나타냅니다.
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/required속성과 pattern속성을 사용하여 정규식 패턴과 일치하는 값을 요구합니다.
<input
type="text"
pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
required
>답변
사용 [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}을 위해 somemail@email.com/somemail@email.com.vn
답변
document.getElementById("email").validity.valid필드가 비어 있거나 유효하면 참인 것 같습니다. 여기에는 다른 흥미로운 플래그도 있습니다.
Chrome에서 테스트되었습니다.
답변
다음은 모든 양식 이메일 입력에 사용하는 예입니다. 이 예제는 ASP.NET이지만 다음에 적용됩니다.
<asp:TextBox runat="server" class="form-control" placeholder="Contact's email"
name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)"
type="email" TextMode="Email" validate="required:true"
pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>HTML5는 필요하지 않은 경우에도 패턴을 사용하여 유효성을 검사합니다. 오 탐지 인 것을 아직 찾지 못했습니다.
이것은 다음 HTML로 렌더링됩니다.
<input class="form-control" placeholder="Contact's email"
name="contact_email" id="contact_email" type="email"
title="Contact's email (format: xxx@xxx.xxx)"
pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">답변
나는 당신이 Javascript 솔루션을 따르지 않는다는 것을 알고 있지만 내 경험으로 볼 때 JS를 사용해야 만 수행 할 수있는 맞춤형 유효성 검사 메시지와 같은 것들이 있습니다.
또한 JS를 사용하면 모든 단일 입력 필드를 수정하는 대신 사이트 내 이메일 유형의 모든 입력 필드에 유효성 검사를 동적으로 추가 할 수 있습니다.
var validations ={
email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
// Check all the input fields of type email. This function will handle all the email addresses validations
$("input[type=email]").change( function(){
// Set the regular expression to validate the email
validation = new RegExp(validations['email'][0]);
// validate the email value against the regular expression
if (!validation.test(this.value)){
// If the validation fails then we show the custom error message
this.setCustomValidity(validations['email'][1]);
return false;
} else {
// This is really important. If the validation is successful you need to reset the custom error message
this.setCustomValidity('');
}
});
})답변
파티에는 조금 늦었지만이 정규식은 클라이언트 측에서 이메일 유형 입력을 검증하는 데 도움이되었습니다. 하지만 우리는 항상 서버 측에서도 확인해야합니다.
<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">여기 에서 모든 종류의 더 많은 정규식을 찾을 수 있습니다 .
