据我所知，因为JavaScript是一种浏览器端语言而MySQL是服务器端，所以我需要一种可以与浏览器交互的服务器端语言，例如PHP。我一直在寻找这里和网络上的解决方案，但没有运气。
我的问题是 - 下面的代码是否有关于如何通过PHP发送验证信息以获取数据库的一般格式？
HTML：
<form method="post" name="regForm" onSubmit="return validateRegForm();">
<table align="center" border="1" bordercolor="black" bgcolor="white" cellpadding="5" cellspacing="0" width="50%">
<tr>
<td>
<table align="center" bordercolor="white" border="0" cellpadding="5" cellspacing="0">
<tr>
<td align="center" colspan="2"><strong>Registration</strong></b></td>
</tr>
<tr>
<td colspan="2"><br></td>
</tr>
<tr>
<td align="right" width="20%">E-mail:</td>
<td align="left" width="30%"><input class="largeTextBox" type="text" name="email" maxlength="50" size="30" placeholder=" email"></td>
</tr>
<tr>
<td align="right" width="20%">Username:</td>
<td align="left" width="30%"><input class="largeTextBox" type="text" name="username" maxlength="50" size="30" placeholder=" username"></td>
</tr>
<tr>
<td align="right" width="20%">Password:</td>
<td align="left" width="30%"><input class="largeTextBox" type="password" name="password" maxlength="50" size="30" placeholder=" password"></td>
</tr>
<tr>
<td align="right" width="20%">Confirm Password:</td>
<td align="left" width="30%"><input class="largeTextBox" type="password" name="cpassword" maxlength="50" size="30" placeholder=" confirm password"></td>
</tr>
<tr>
<td align="right" width="20%">First Name:</td>
<td align="left" width="30%"><input class="largeTextBox" type="text" name="firstname" maxlength="50" size="30" placeholder=" first name"></td>
</tr>
<tr>
<td align="right" width="20%">Last Name:</td>
<td align="left" width="30%"><input class="largeTextBox" type="text" name="lastname" maxlength="50" size="30" placeholder=" last name"></td>
</tr>
<tr>
<td align="right" width="20%">Team Name:</td>
<td align="left" width="30%"><input class="largeTextBox" type="text" name="teamname" maxlength="50" size="30" placeholder=" team name"></td>
</tr>
<tr>
<td colspan="2" align="center"><input class="bigButton" type="submit" value="Register"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
JavaScript的：
function validateRegForm()
{
//Validates email address
var a = document.forms["regForm"]["email"].value;
if (a == null || a == "") {
alert("You forgot to enter your Email!");
return false;
} else {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (a.match(mailformat)) {
document.regForm.email.focus();
} else {
alert("You have entered an invalid Email Address!");
document.regForm.email.focus();
return false;
}
}
//Validates username
var aa = document.forms["regForm"]["username"].value;
if (aa == null || aa == "") {
alert("You forgot to enter your Username!");
document.regForm.username.focus();
return false;
}
re = /^\w+$/;
if (!re.test(regForm.username.value)) {
alert("Your Username must contain only letters, numbers, and underscores!");
document.regForm.username.focus();
return false;
}
if (aa.length < 7) {
alert("Your Username is too short! (8 character min)");
document.regForm.username.focus();
return false;
}
//Validates password & confirm password
if (regForm.password.value != "" && regForm.password.value == regForm.cpassword.value) {
if (regForm.password.value.length < 7) {
alert("Your Password must contain at least 8 characters!");
document.regForm.email.focus();
return false;
}
re = /[0-9]/;
if(!re.test(regForm.password.value)) {
alert("Your Password must contain at least one number (0-9)!");
document.regForm.password.focus();
return false;
}
re = /[a-z]/;
if(!re.test(regForm.password.value)) {
alert("Your Password must contain at least one lowercase letter (a-z)!");
document.regForm.password.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(regForm.password.value)) {
alert("Your Password must contain at least one uppercase letter (A-Z)!");
document.regForm.password.focus();
return false; }
} else {
alert("Please check that you've entered or confirmed your password!");
document.regForm.password.focus();
return false;
}
//Validates first name
var b = document.forms["regForm"]["firstname"].value;
if (b == null || b == "") {
alert('You forgot to enter your First Name!');
return false;
}
//Validates last name
var c = document.forms["regForm"]["lastname"].value;
if (c == null || c == "") {
alert('You forgot to enter your Last Name!');
return false;
}
//Validates team name
var d = document.forms["regForm"]["teamname"].value;
if (d == null || d == "") {
alert('You forgot to enter your Team Name!');
document.regForm.teamname.focus();
return false;
}
re = /^\w+$/;
if (!re.test(regForm.teamname.value)) {
alert("Team Name must contain only letters, numbers, and underscores!");
document.regForm.teamname.focus();
return false;
}
if (d.length < 7) {
alert("Your Team Name is too short! (8 character min)");
document.regForm.teamname.focus();
return false;
}
return true;
}
答案 0 :(得分：2)
您的问题有很多方法。 这是我的想法，
<form method="post" name="regForm" onSubmit="return validateRegForm();">
这部分应该有一个'动作'。
在您的表单上，应该有一个
<input type="submit" name="submit" value="Submit"/>
这将在“form”标签中调用“onSubmit”动作。
试一试。也许这些是你错过的东西。 干杯！
答案 1 :(得分：0)
客户端验证与服务器的角色不同。虽然服务器的工作是保持bad guys并确保您的数据是干净的，但客户端验证的目的应该是尽可能地填写表单。
做好服务器端验证本身就是一门科学。幸运的是，有一些框架可以让它更容易正确地完成（Laravel和CodeIgniter是个人的最爱），但如果你有一个值得称赞的目标，即从头开始学习它，那里有很多东西可供选择。读取。
良好的客户端验证利用了JavaScript的优势。它是即时的，并向用户显示问题的确切位置。除了用户一次收到一个错误并且必须点击警报直到他们做对了这个事实之外，你在大多数情况下已经解决了这个问题。我们还可以摆脱一些重复。
我们可以将您的验证收集到具有名称和正则表达式的对象数组中。
var validators = [
{name: 'username', test: /^[\d\w]{8,}$/},
{name: 'email', test: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/},
{name: 'password', test: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/},
{name: 'cpassword', test: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/},
{name: 'firstname', test: /w+/},
{name: 'lastname', test: /w+/},
{name: 'teamname', test: /[\w+\d+]{8,}/}
];
接下来，让我们摆脱警报并在其字段旁边放置红色错误消息。首先，CSS：
td.hide{
display: none;
}
td.error {
font-size: .8em;
color: #F00;
padding: 0 0 0 30%;
}
...在我们的表格中，我们将添加隐藏的行，其中已包含错误消息like so。您可以通过使用自定义消息修改上面的验证器数组然后在下面对其进行编码来使消息变得复杂并且将消息传递给错误类型，但为了简单起见，我将把它作为每个字段的一个正则表达式并将错误硬编码到隐藏的验证行。您还可以向服务器添加ajax调用，检查是否已经使用了用户名/电子邮件，但这应该是一个良好的开端。
现在我们可以创建一个函数，只要用户更改某些内容，就会遍历数组。这不需要花费很多，而且几乎是即时的。
function validateRegForm(event)
{
var formIsValid = true;
for(var i=0; i < validators.length; i++){
var currentField = document.getElementsByName(validators[i].name)[0];
var validationField = document.getElementById(validators[i].name + "Validation");
//check that this field is valid, as well as the other filled out ones along the way
if(validators[i].name == event.target.name || currentField.value.length > 0){
if(validators[i].test.test(currentField.value)){
validationField.setAttribute("class", "hide");
}else{
validationField.setAttribute("class", "error");
formIsValid = false;
}
//do the passwords match?
if(currentField.name == 'cpassword' || validators[i].name == 'cpassword'){
if(document.getElementsByName('cpassword')[0].value != document.getElementsByName('password')[0].value){
document.getElementById('cpasswordValidation').setAttribute("class", "error");
formIsValid = false;
}
else {
document.getElementById('cpasswordValidation').setAttribute("class", "hide");
}
}
}
}
if(!formIsValid){
event.preventDefault();
}
return formIsValid;
}
通过脚本，我们首先假设表单对var formIsValid有效。一旦我们点击了不是的东西，我们就将其更改为false，以便最后表单不会提交。然后我们只是迭代，看看什么是有效的。我们忽略空字段，除非它是用户刚刚更改的字段，因此用户不会从他们的电子邮件开始，然后随处变红，因为它全部为空白。最后，我们提出了一个比较密码的特殊条件。
请参阅我的Codepen以了解相关信息。
在服务器上，您应检查上述相同内容，然后正确转义＆amp;将其编码以存储在数据库中。您不应该假设表单是从您的注册页面发布的。如果请求不是来自您的页面，有多种方法可以检查服务器上的内容并拒绝用户。大多数服务器端语言都有内置的方法来完成这些工作，但是一个好的框架会让它不那么令人头疼。