JavaScript中的学生注册表格验证
[英]Student Registration Form Validation in JavaScript
问题描述
I have been working on a student registration form validation in JavaScript but it doesn't work at all. 
我一直在使用JavaScript进行学生注册表单验证，但它根本不起作用。 I have even tried writing all sorts of log statements for debugging but it seems the functions aren't being invoked at all(?). 我什至尝试编写各种日志语句进行调试，但似乎根本没有调用函数（？）。
It'd be helpful if you guys could let me know where I am going wrong with this. 如果你们可以让我知道我要怎么做，这将是有帮助的。 Here is the code : 这是代码：
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> function allLetter() { var name = document.querySelector("#name").value; var letters = /^[A-Za-z]*$/; if (name.test(letters)) { return true; } else { alert("Not a valid Name"); return false; } } function rollnumber() { var roll = document.querySelector("#roll").value; var phoneno = /^\\d{7}$/; if (roll.test(phoneno)) { return true; } else { alert("Not a valid Roll Number"); return false; } } function date() { var date = document.querySelector("#date").value; if (!date) { return true; } else { alert("Empty Date"); return false; } } function check() { var t1 = allLetter(); var t2 = rollnumber(); var t3 = date(); console.log(t1); console.log(t2); console.log(t3); if (t1 && t2 && t3) { alert("Registration Successful"); return true; } else { alert("One or More Fields are incorrectly set"); return false; } } </script> </head> <body> <h2>STUDENT REGISTRATION FORM</h2> <form name="form1" method="post" onsubmit="return check()"> <label for="name">Name :</label> <input type="text" id="name"><br> <label for="roll">Roll No :</label> <input type="text" id="roll"><br> <label for="date">DOB :</label> <input type="date" id="date"><br> <input type="submit" value="Register"> </form> </body> </html>
3 个解决方案
解决方案1
2 2017-05-05 17:15:17
here is my solution no javascript needed just html 这是我的解决方案，无需javascript，只需html
<h2>STUDENT REGISTRATION FORM</h2> <form name="form1" method="post"> <label for="name">Name :</label> <input type="text" id="name" pattern="[A-Za-z\\s]+" required><br> <label for="roll">Roll No :</label> <input type="text" id="roll" pattern="[0-9]+" required><br> <label for="date">DOB :</label> <input type="date" id="date" required><br> <input type="submit" value="Register"> </form>
解决方案2
1 已采纳 2017-05-05 17:09:25
You inverted the use of .test method. 您反转了.test方法的使用。 You should use regex on the left, because .test is a method of regexes. 您应该在左侧使用正则表达式，因为.test是正则表达式的一种方法。 Here your code working: 您的代码在这里工作：
function allLetter() {
var name = document.querySelector("#name").value;
var letters = /^[A-Za-z]*$/;
if (letters.test(name)) {
return true;
} else {
alert("Not a valid Name");
return false;
}
}
function rollnumber() {
var roll = document.querySelector("#roll").value;
var phoneno = /^\d{7}$/;
if (phoneno.test(roll)) {
return true;
} else {
alert("Not a valid Roll Number");
return false;
}
}
function date() {
var date = document.querySelector("#date").value;
if (!date) {
return true;
}
else {
alert("Empty Date");
return false;
}
}
function check() {
var t1 = allLetter();
var t2 = rollnumber();
var t3 = date();
console.log(t1);
console.log(t2);
console.log(t3);
if (t1 && t2 && t3) {
alert("Registration Successful");
return true;
} else {
alert("One or More Fields are incorrectly set");
return false;
}
}
Then inside the onsubmit event you can remove the return and just use the method, the method will return directly true or false 然后在onsubmit事件中，您可以删除return并只使用方法，该方法将直接返回true或false
<form name="form1" method="post" onsubmit="check();">
解决方案3
1 2017-05-05 17:12:24
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.