JS 表单不会验证电话号码
[英]JS form wont validate phone number
问题描述
So i was making a simple web page to order a pizza as an assignment.
所以我正在制作一个简单的网页来订购披萨作为作业。 I am supposed to take in data and also supposed to validate the form as well.我应该接受数据，也应该验证表格。 so i wrote just a plain html and a simple JS code.所以我只写了一个普通的html和一个简单的JS代码。 The name and the email validates, but when it comes to validating phone number, it doesn't validate.名称和电子邮件会验证，但在验证电话号码时，它不会验证。 I wrote a simple(but wrong on extreme cases) RegEx for the phone number validation, but it doesnt validate, i can write anything in the phone number textfield and the form accepts it when i click on submit.我为电话号码验证写了一个简单的（但在极端情况下是错误的）正则表达式，但它没有验证，我可以在电话号码文本字段中写任何内容，并且当我单击提交时表单接受它。 Thanks for your help.谢谢你的帮助。
function validateForm(){ //validate name var name = document.getElementById("name").value; if(name=="" || !(/^[a-zA-Z ]+$/.test(name))){ document.getElementById("name_error").innerHTML = " Invalid Username"; return false } //validate email var email = document.getElementById("em").value; var atposition=email.indexOf("@"); var dotposition=email.lastIndexOf("."); if (email=="" || atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){ document.getElementById("email_error").innerHTML = " Invalid Email"; return false; } //validate phone Number var phno = document.getElementById("pno").value; if(phno == "" || !(/^[0-9]{10}$/.test(phno))){ document.getElementById("phone_error").innerHTML = " Invalid phone number"; return false; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form name="form1" onsubmit = "return validateForm()"> <fieldset> <legend>personal details</legend> <label for="name">Name:</label><br> <input type="text" name="Name" id="name"><span id="name_error"></span><br> <label for="em">Email:</label><br> <input type="text" name="e-mail" id="em" ><span id="email_error"></span><br> <label for="pno">Phone No.:</label><br> +91<input name="Phone Number" id="pno" maxlength="10"><span id="phone_error"></span><br> </fieldset> <fieldset> <legend>select pizza</legend> <input type="radio" id="simply_veg" name="select_pizza" value="Simpy Veg"><label for="simply_veg">Simply Veg</label><br> <input type="radio" id="veg_sup" name="select_pizza" value="Veg Supreme"><label for="veg_sup">Veg Supreme</label><br> <input type="radio" id="veg_del" name="select_pizza" value="Veg Delight"><label for="veg_del">Veg Delight</label><br> <div name="piz_not_sel"></div> </fieldset> <fieldset> <legend>select pizza size</legend> <input type="radio" id="pers_pan" name="select pizza size"><label for="pers_pan">Personal Pan</label><br> <input type="radio" id="med" name="select pizza size"><label for="med">Medium</label><br> <input type="radio" id="lar" name="select pizza size"><label for="lar">Large</label><br> </fieldset> <fieldset> <legend>select crust</legend> <input type="radio" id="thin" name="select crust"><label for="thin">Thin</label><br> <input type="radio" id="norm" name="select crust"><label for="norm">Normal</label><br> <input type="radio" id="spec" name="select crust"><label for="spec">Special</label><br> </fieldset> <fieldset> <legend>select payment option</legend> <label for="pay_opn">Choose a car:</label> <select id="pay_opn" name="pay_opn" required> <option value="COD">COD</option> <option value="Debit Card">Debit Card</option> <option value="Credit Card">Credit Card</option> <option value="UPI">UPI</option> </select><br> </fieldset> <fieldset> <legend>promo code</legend> <label for="code">Please enter code if any </label><textarea id="code" name="code" rows="1" cols="9" maxlength="9" placeholder="PIZDIS090"></textarea><br> </fieldset> <fieldset> <legend>Terms and Conditions</legend> <input type="checkbox" id="tnc" name="termncond"><label for="tnc">I agree to the Terms and Conditions</label> </fieldset> <input type="submit" value="submit"><input type="reset"> <div id="otpt"></div> </form> <script src="pizza_validate.js"> </script> </body> </html>
PS:There is something wierd i noticed that when I move the PhoneNumber validation block above that of Name block, it works perfectly from there on. PS：我注意到有些奇怪的是，当我将 PhoneNumber 验证块移到 Name 块上方时，它从那里开始完美运行。
1 个解决方案
解决方案1
0 2022-06-02 16:01:34
Your return false statement will cause the reported behavior.您的退货虚假陈述将导致被举报的行为。 Update the script as below.如下更新脚本。 However this will show the validation messages, but not remove the validation messages, for that either add else condition and remove validation message for valid data or add onblur/keyUp events to handle this.但是，这将显示验证消息，但不会删除验证消息，因为添加 else 条件并删除有效数据的验证消息或添加onblur/keyUp事件来处理此问题。
function validateForm(){
var isValid = true;
//validate name
var name = document.getElementById("name").value;
if(name=="" || !(/^[a-zA-Z ]+$/.test(name))){
document.getElementById("name_error").innerHTML = " Invalid Username";
isValid = false;
}
//validate email
var email = document.getElementById("em").value;
var atposition=email.indexOf("@");
var dotposition=email.lastIndexOf(".");
if (email=="" || atposition<1 || dotposition<atposition+2 || dotposition+2>=email.length){
document.getElementById("email_error").innerHTML = " Invalid Email";
isValid = false;
}
//validate phone Number
var phno = document.getElementById("pno").value;
if(phno == "" || !(/^[0-9]{10}$/.test(phno))){
document.getElementById("phone_error").innerHTML = " Invalid phone number";
isValid = false;
}
return isValid;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.