我試圖在我的網頁上執行一個 js 腳本以在將其放入資料庫之前驗證表單中的條目但它不起作用，論壇接受我輸入的所有內容，即使它是錯誤的
那是我的 js 代碼，我把它放在頭上（我也試著把它放在身體里，但同樣的問題）
<script>
function test() {
name=f.name.value;
email=f.email.value;
phone=f.phone.value;
for (i=0;i< length(name) ;i ){
if(name.charAt(name[i])<'a' || nom.charAt(name[i])>'z' || name.charAt(name[i])<'A' || name.charAt(name[i])>'Z')
{
alert("verify your name");
return false;
}
}
if (isNaN(phone) || phone.length!=8 )
{
alert("verify your phone number");
return false;
}
at=email.indexOf('@')
point=email.indexOf('.',at)
if(email=="" || at==-1 || point==-1)
{
alert("verify your email");
return false;
}
}
</script>
這就是html中的表單代碼
<form action="add.php" method="POST" role="form" class="php-email-form" data-aos="fade-up" data-aos-delay="100" name='f' onsubmit='return test()'>
<div class="row">
<div class="col-lg-4 col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
<input type="text" class="form-control" name="phone" id="phone" placeholder="Your Phone" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3">
<input type="date" name="date" class="form-control" id="date" placeholder="Date" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3">
<input type="time" class="form-control" name="time" id="time" placeholder="Time" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3">
<input type="number" class="form-control" name="people" id="people" placeholder="# of people" data-rule="minlen:1" data-msg="Please enter at least 1 chars">
<div class="validate"></div>
</div>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
</div><div class="text-center"><button onclick="test()" type="submit" name="ok">Book a table</button></div>
</form>
uj5u.com熱心網友回復：
length(name)破壞了功能（改為使用）name.length。因此它不能回傳false并阻止表單提交。我還清理了您標記中的其他一些位。
f直接在代碼中使用類似名稱的方式不被認為是好的風格，盡管它清楚地參考了form頁面上的名稱。為了使您的代碼更易于閱讀（并且在維護它時更穩定），您應該像這樣宣告一個常量：
const f = document.querySelector("form[name=f]");
這使得f其余代碼中的“不可分配”。否則，放置在代碼中某處的錯誤f=123;可能會破壞功能。
f.onsubmit=function(ev){
const name = f.name.value,
email = f.email.value,
phone = f.phone.value;
for (i = 0; i < name.length; i ) {
if (name.charAt(name[i]) < 'a' || nom.charAt(name[i]) > 'z' || name.charAt(name[i]) < 'A' || name.charAt(name[i]) > 'Z') {
alert("verify your name");
return false;
}
}
if (isNaN(phone) || phone.length != 8) {
alert("verify your phone number");
return false;
}
at = email.indexOf('@')
point = email.indexOf('.', at)
if (email == "" || at == -1 || point == -1) {
alert("verify your email");
return false;
}
}<body>
<form action="add.php" method="POST" role="form" class="php-email-form" data-aos="fade-up" data-aos-delay="100" name='f'>
<div class="row">
<div class="col-lg-4 col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
<input type="text" class="form-control" name="phone" id="phone" placeholder="Your Phone" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3">
<input type="date" name="date" class="form-control" id="date" placeholder="Date" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3">
<input type="time" class="form-control" name="time" id="time" placeholder="Time" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3">
<input type="number" class="form-control" name="people" id="people" placeholder="# of people" data-rule="minlen:1" data-msg="Please enter at least 1 chars">
<div class="validate"></div>
</div>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
</div>
<div class="text-center"><button>Book a table</button></div>
</form>
</body>
<script>
</script>uj5u.com熱心網友回復：
你沒有宣告你的變數。就像const name=f.name.value;你的宣告中的 f 在你的 javascript 中沒有任何意義。首先，您需要選擇您需要使用的元素queryselector，您可以查看此檔案
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
也不是一個好主意呼叫onclick在 html 中使用的函式。在您使用 queryselector 選擇的元素上呼叫您想要的函式addeventlistener，您可以查看此檔案
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
而不是length(name)您應該使用name.length
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/463416.html
標籤：javascript html
下一篇：第一天：基礎