所以我是撰寫java腳本的新手，實際學習并遇到了這個東西驗證。在表單驗證期間，我能夠驗證名稱、主題和訊息，但不明白如何驗證電子郵件。嘗試這樣做并學習，但沒有很好地鍛煉。此外，如果有任何方法可以在訊息框中設定最小字數限制而不是最小字符數限制，請也提供幫助。提前致謝
const name = document.getElementById("fname");
const message = document.getElementById("message");
const sub = document.getElementById("subject")
function validate() {
var isError = false;
var errMessage = '';
if (name.value === "" || name.value == null) {
isError = true;
errMessage = "Please Enter Your Name\n";
}
if (sub.value === "" || sub.value == null) {
isError = true;
errMessage = "Please Enter a Subject\n";
}
if (message.value < 40) {
isError = true;
errMessage = "Your Message Should be Longer";
}
if (isError) {
alert(errMessage);
return false;
} else {
return true;
}
}.contact-col {
flex-basis: 48%;
margin-bottom: 30px;
}
.contact-col div {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.contact-col div .fa {
font-size: 28px;
color: #f7a335;
margin: 10px;
margin-right: 30px;
}
.contact-col div p {
padding: 0;
}
.contact-col div h5 {
font-size: 20px;
margin-bottom: 5px;
color: #555;
font-weight: 400;
}
.contact-col input,
.contact-col textarea {
width: 100%;
padding: 15px;
margin-bottom: 17px;
outline: none;
border: 1px solid #ccc;
box-sizing: border-box;
}
.red-btn {
display: inline-block;
text-decoration: none;
color: #f7a335;
border: 1px solid #f7a335;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.red-btn:hover {
color: #fff;
border: solid#f7a335;
background: #f7a335;
transition: 1s;
}<div class="contact-col">
<form onsubmit="return validate()">
<input type="text" placeholder="Enter Your Name" id="fname">
<input type="email" placeholder="Enter E-mail ID">
<input type="text" placeholder="Enter Your Subject" id="subject">
<textarea rows="8" placeholder="Message" id="message"></textarea>
<button type="submit" class="red-btn">Send Message</button>
</form>
</div>uj5u.com熱心網友回復：
嗨，我為您找到了幫助。
您可以使用 RegExp 進行匹配。
這是我自己的正則運算式：
/.*\@.*\.\w{2,3}/g
這是我在互聯網上找到的 RegExp：
/^(([^<>()[\]\\.,;:\s@"] (\.[^<>()[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/
這是您要測驗的代碼：
const name = document.getElementById("fname");
const message = document.getElementById("message");
const sub = document.getElementById("subject");
const email = document.getElementById("email")
function validate() {
var isError = false;
var errMessage = '';
if (name.value === "" || name.value == null) {
isError = true;
errMessage = "Please Enter Your Name\n";
}
if (sub.value === "" || sub.value == null) {
isError = true;
errMessage = "Please Enter a Subject\n";
}
if (message.value < 40) {
isError = true;
errMessage = "Your Message Should be Longer\n";
}
console.log(email.value.match(/.*\@.*\.\w{2,3}/g))
if (email.value === "" || email.value.match(/.*\@.*\.\w{2,3}/g) === null){
isError = true;
errMessage = "Please Enter a Valid Email";
}
if (isError) {
alert(errMessage);
return false;
} else {
return true;
}
}.contact-col {
flex-basis: 48%;
margin-bottom: 30px;
}
.contact-col div {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.contact-col div .fa {
font-size: 28px;
color: #f7a335;
margin: 10px;
margin-right: 30px;
}
.contact-col div p {
padding: 0;
}
.contact-col div h5 {
font-size: 20px;
margin-bottom: 5px;
color: #555;
font-weight: 400;
}
.contact-col input,
.contact-col textarea {
width: 100%;
padding: 15px;
margin-bottom: 17px;
outline: none;
border: 1px solid #ccc;
box-sizing: border-box;
}
.red-btn {
display: inline-block;
text-decoration: none;
color: #f7a335;
border: 1px solid #f7a335;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.red-btn:hover {
color: #fff;
border: solid#f7a335;
background: #f7a335;
transition: 1s;
} <div class="contact-col">
<form onsubmit="return validate()">
<input type="text" placeholder="Enter Your Name" id="fname">
<input type="text" placeholder="Enter E-mail ID" id="email">
<input type="text" placeholder="Enter Your Subject" id="subject">
<textarea rows="8" placeholder="Message" id="message"></textarea>
<button type="submit" class="red-btn">Send Message</button>
</form>
</div>注意：我將電子郵件的輸入型別更改為文本以測驗驗證
uj5u.com熱心網友回復：
我為電子郵件做過，你可以通過學習正則運算式來完成其余的作業：REGEX 教程
HTML
<div class="contact-col">
<form name="form1" action="#">
<input type='text' name='text1' />
<input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)" />
</form>
</div>
CSS
.contact-col {
flex-basis: 48%;
margin-bottom: 30px;
}
.contact-col div {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.contact-col div .fa {
font-size: 28px;
color: #f7a335;
margin: 10px;
margin-right: 30px;
}
.contact-col div p {
padding: 0;
}
.contact-col div h5 {
font-size: 20px;
margin-bottom: 5px;
color: #555;
font-weight: 400;
}
.contact-col input,
.contact-col textarea {
width: 100%;
padding: 15px;
margin-bottom: 17px;
outline: none;
border: 1px solid #ccc;
box-sizing: border-box;
}
.red-btn {
display: inline-block;
text-decoration: none;
color: #f7a335;
border: 1px solid #f7a335;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.red-btn:hover {
color: #fff;
border: solid#f7a335;
background: #f7a335;
transition: 1s;
}
JS
function ValidateEmail(inputText) {
var mailformat = /^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w{2,3}) $/;
if (inputText.value.match(mailformat)) {
alert("Valid email address!");
document.form1.text1.focus();
return true;
} else {
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
我的小提琴
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/422167.html
標籤：