javascript - 我的网站的 Java 表单验证

Question

我创建了一个警报框，它将输出表单中的详细信息我现在想知道如何启动 Java 验证部分，以便填写表单 正确的话，将显示包含表单详细信息的警告框，但如果错误，则指示用户填写无效的框。

HTML

 <form id="foo" onsubmit="formAlert(); return false;" method="POST">
    <p><label for="first_name">First Name<label><input type="text" id="first_name" value="" /></p>
    <p><label for="last_name">Last Name<label><input type="text" id="last_name" value="" /></p>
     <p><label for="Phone_num">Phone Number<label><input type="number" id="phone_num" value="" /></p>


    <p><input type="submit" value="click me" onclick=""/></p>
</form>

Java 脚本

 function formAlert() {
alert_string = '';
var userName = document.getElementById('first_name').value;
var userLastName = document.getElementById('last_name').value;
 var phoneno =  document.getElementById('phone_num').value;
if(userName === "" || userName === null){
  alert("Please enter name");
}
if(userLastName === "" || userLastName === null){
  alert("Please enter lastname");
}

else if(phoneno === "/^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0 -9]{4})$/;"|| 电话号码 === null){ Alert("请输入电话号码"); }

else{
 alert_string += userName + " ";
 alert_string += userLastName;
 alert_string += phoneno;
 alert(alert_string);

} }

Answer 1

这是一个快速而简单的解决方案。将其添加到您的 JavaScript 代码中。希望对您有帮助!

function validatePhone(inputtxt) {
 var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
 return phoneno.test(inputtxt)
 }

 function formAlert() {
  alert_string = '';
 var userName = document.getElementById('first_name').value;
 var userLastName = document.getElementById('last_name').value;
 var phoneno =  document.getElementById('phone_num').value;
 if(userName === "" || userName === null){
 alert("Please enter name");
 }
 if(userLastName === "" || userLastName === null){
 alert("Please enter lastname");
 }
else if(!validatePhone(phoneno)){ alert("Please enter 10 digits for phone  number"); }

else{
alert_string += userName + " ";
alert_string += userLastName + " ";
alert_string += phoneno;
alert(alert_string);
 } 
}

要检查电子邮件，需要简单的使用。像这样的事情:

<input type="email" name="email" required>

验证电话号码的方法有很多。这是一个很好的例子:信用转到:https://stackoverflow.com/a/18376246/4084160