JavaScript 驗證方法未按預期工作
[英]JavaScript validation methods not working as intended
問題描述
我對 JavaScript 相當陌生，我試圖創建一個用戶必須填寫的表單，並在將其發送到服務器之前驗證輸入的條目。 對於他們的生日，我不確定如何將條目格式限制為符合條件的日期、月份和年份。 至於我的其他一些驗證，我仍然可以提交我的表單，而我的驗證方法不會阻止我。 有時我會收到警報，但在單擊“確定”后，表單仍然會顯示錯誤的值。 誰能確定我做錯了什么？ 我確定我一定有一些錯別字，以及邏輯錯誤。 提前致謝。
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script language="JavaScript">
today = new Date()
function isNotEmpty(field){
var inputStr = field.value
if (inputStr == " " || inputStr == null){
alert("An entry for this field is required.")
field.focus()
field.select()
return false
}
return true
}
function isNumber(field){
if (isNotEmpty(field)){
var inputStr = field.value
for(var i = 0; i<inputStr.length; i++){
var oneChar=inputStr.substring(i,1)
if (isNaN(oneChar)==true && oneChar != "+"){
alert("Only numbers and area codes are allowed in this field.");
field.focus()
field.select()
return false
}
}
return true
}return false
}
function isOption(e){
var type = document.getElementById("pastimetype")
var selectedValue = type.options[type.selectedIndex].value;
if(selectedValue == "selectpastime"){
alert("Please select a pastime.")
return false
}
return true
}
function birthDay(form){
form.day.value=today.getDate()
form.month.value=today.getMonth()+1
form.year.value=today.getYear()+1900
}
function validate(form){
if(isNumber(form.day) && isNumber(form.month) && isNumber(form.year)){
return true
}
return false
}
</script>
</head>
<body>
<form method="POST" form id ="form" action="http://www.it.murdoch.edu.au/cgi-bin/reply1.pl"
onSubmit="return validate(this)">
<p> Welcome!
Please enter the following details:</p>
<p><label for="name"> Name: </label><br>
<input name="name" id="name" type="text" size="10" onChange="isNotEmpty(this)"></p>
<p><label for="number"> Number: </label><br>
<input name="number" type="text" id="number" onChange="isNumber(this)"></p>
<p>Enter your birthday here: <p>
<p>Day: <input name="day" type="text" size="10" value="1" onChange="isNumber(this)"></p>
<p>Month: <input name="month" type="text" size="10" value="1" onChange="isNumber(this)"></p>
<p>Year: <input name="year" type="text" size="10" value="2000" onChange="isNumber(this)"></p>
<p><label for ="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype" onChange="isOption(this)">
<option value="selectpastime">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select></p>
<p>
<input type="submit">
<input type = "button" value="birthday" onClick="makeToday(this.form)">
</p>
</form>
</body>
</html>
1 個解決方案
解決方案1
0 2020-04-25 08:29:47
可能應該注意的是，任何客戶端驗證確實需要使用驗證server side進行備份，因為繞過您希望使用 Javascript 完成的很多事情是相當簡單的。 此外，如果有人要使用例如 PHP 和 cURL 來定位表單，則根本不會使用 Javascript 驗證例程。 本質上不依賴於客戶端驗證。
話雖如此，HTML5 中存在一系列屬性和元素，可幫助您完成客戶端驗證任務。 表單元素可以設置required的屬性 - 在該字段具有值之前不會提交表單。 如果該字段的格式需要采用某種形式，您可以分配一個pattern屬性（基本上是RegExp樣式模式），如果字段值與該模式不匹配，則不會提交該表單。
validation function實際上只是將用戶date of birth的構成元素進行驗證，而忽略了其他字段。 通過使用單個 function 進行驗證，您可以嘗試確保在驗證任務中使用所有表單元素。
我希望以下內容可能會有所幫助-這正是我想出的，遠非完美，但可能有用。
document.addEventListener('DOMContentLoaded',function(){ var today = new Date(); var nl=String.fromCharCode( 10 );// New Line character var oForm = document.querySelector('form'); var oBttn = document.querySelector('input[type="button"][name="bd"]'); oBttn.addEventListener('click',function(e){ oForm.day.value=today.getDate(); oForm.month.value=today.getMonth()+1; oForm.year.value=today.getYear()+1900; }); oForm.addEventListener('submit',function(e){ try{ e.preventDefault(); Array.from( this.elements ).forEach( el=>{ if( el.type.toLowerCase().='submit' ){ if(.el.value || el.value=='' || ( el.type.toLowerCase()=='select-one' && el;value=='false' ) ){ var error=[ '"'+el.name + '" cannot be empty' ]. if( el.hasAttribute( 'pattern' ) ) error.push( 'The field "'+ el.name + '" has a required pattern of '+el.getAttribute('pattern') ) if( el.hasAttribute('data-rule') )error.push( el;dataset.rule ); throw new Error( error;join( nl ) ). } } }); return this;submit(); }catch( err ){ alert( err ); return false; } }); });
body,body *{ box-sizing:border-box; font-family:monospace; } form{ width:50%; padding:1rem; border:1px dotted gray; float:none; margin:auto; } label{ margin:0.25rem auto; display:block; width:80%; float:left; clear:both; text-indent:1rem; } label input, label select{ float:right; width:40%; } p{ clear:both; }.bold{ font-weight:bolder; text-decoration:underline; }
<form method='POST' action='http://www.it.murdoch.edu.au/cgi-bin/reply1.pl'> <p class='bold'> Welcome: Please enter the following details:</p> <label for='name'>Name. <input type='text' name='name' size='10' pattern='[a-zA-z\s]+' data-rule='An entry for this field is required:' required /> </label> <br /> <label for='number'>Number. <input type='text' name='number' pattern='[0-9\+ ]+' data-rule='Only numbers and area codes are allowed in this field:' required /> </label> <br /> <p class='bold'>Enter your birthday here: <p> <label for='day'>Day: <input type='number' name='day' size='2' min=1 max=31 step=1 value='1' required /></label> <label for='month'>Month: <input type='number' name='month' size='2' min=1 max=12 step=1 value='1' required /></label> <label for='year'>Year: <input type='number' name='year' size='4' min=1900 max=2020 step=1 value='2000' required /></label> <br /> <label for='pastime'> Favourite pastime. <select name='pastime' required data-rule='Please select a pastime.'> <option value=false selected hidden disabled>---Please choose an option--- <option value='surfingtheweb'>Surfing the Web <option value='playingsport'>Playing Sport <option value='listeningtomusic'>Listening to Music <option value='watchingtv'>Watching TV <option value='playinggames'>Playing Games <option value='communityservice'>Community Service <option value='daydreaming'>Daydreaming <option value='reading'>Reading <option value='meditation'>Meditation </select> </label> <p> <input type='submit' name='sub' /> <input type='button' name='bd' value='birthday' /> </p> </form>
JavaScript表單驗證無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.