我的朋友给了我这张表格，他告诉我一份问卷表格， 但我把它修改为注册，但没有工作。
HTML
这是我的表单，它将转到reg.php，但它不起作用，JavaScript只用于验证/发送消息。
<form method="post" action="reg.php" id="theForm" class="simform form" ">
<div class="simform-inner">
<ol class="questions">
<li>
<span><label for="q1">What's your full name?</label></span>
<input name="Name" id="name" type="text" />
</li>
<li>
<span><label for="q2">What's your email?</label></span>
<input name="Email" id="email" type="email"/>
</li>
<li>
<span><label for="q3">your new username</label></span>
<input name="Username" id="username" type="text"/>
</li>
<li>
<span><label for="q3">your new password</label></span>
<input size="16" name="Password" id="password"type="password"/>
</li>
</ol><!-- /questions -->
<button class="submit" value="submit" name="reg" type="submit">Continue</button>
<div class="controls">
<button class="next"></button>
<div class="progress"></div>
<span class="number">
<span class="number-current"></span>
<span class="number-total"></span>
</span>
<span class="error-message"></span>
</div><!-- / controls -->
</div><!-- /simform-inner -->
<span class="final-message"></span>
</form><!-- /simform -->
JavaScript
加载并显示我的留言
<script>
new stepsForm( theForm, {
onSubmit : function( form ) {
// hide form
classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );
/*
form.submit()
or
AJAX request (maybe show loading indicator while we don't have an answer..)
*/
// let's just simulate something...
var messageEl = theForm.querySelector( '.final-message' );
messageEl.innerHTML = 'Welcome!.';
classie.addClass( messageEl, 'show' );
}
} );
</script>
PHP
<?
$reg = @$_POST['reg'];
//declaring variables to prevent errors
$Name = ""; //First Name
$Email= ""; //Email
$Username= ""; //Username
$Password = ""; //Password
$em2 = ""; //Email 2
$d = ""; // Sign up Date
$u_check = ""; // Check if username exists
//registration form
$Name = strip_tags(@$_POST['Name']);
$Username = strip_tags(@$_POST['Username']);
$Email = strip_tags(@$_POST['Email']);
$Password = strip_tags(@$_POST['Password']);
$d = date("Y-m-d"); // Year - Month - Day
if ($reg) {
if ($Email==$Email) {
// Check if user already exists
$u_check = mysql_query("SELECT username FROM users WHERE username='$Username'");
// Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
//Check whether Email already exists in the database
$e_check = mysql_query("SELECT email FROM users WHERE email='$Email'");
//Count the number of rows returned
$email_check = mysql_num_rows($e_check);
if ($check == 0) {
if ($email_check == 0) {
//check all of the fields have been filed in
if ($Name&&$Username&&$Email&&$Password) {
// check that passwords match
if ($Password) {
// check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($Username)>25||strlen($Name)>25) {
echo "The maximum limit for username/first name/last name is 25 characters!";
}else{
// check the maximum length of password does not exceed 25 characters and is not less than 5 characters
if (strlen($Password)>30||strlen($Password)<5) {
echo "Your password must be between 5 and 30 characters long!";
}else{
//encrypt password and password 2 using md5 before sending to database
$Password = md5($Password);
$query = mysql_query("INSERT INTO users VALUES ('','$Username','$Name',$Email','$Password','$d','0','Write something about yourself.','','','no')");
die("<h2>Welcome!/h2>Login to your account to get started ...");
}
}
}else{
echo "Sorry, but it looks like someone has already used that email!";
}
}else{
echo "Username already taken ...";
}
}
}
}
}
?>
Stepform.js
;( function( window ) {
'use strict';
var transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function stepsForm( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
// generates a unique id
function randomID() {
var id = Math.random().toString(36).substr(2, 9);
if (document.getElementById(id)) {
return randomID();
}
return id;
}
stepsForm.prototype.options = {
onSubmit : function() { return false; }
};
stepsForm.prototype._init = function() {
// current question
this.current = 0;
// questions
this.questions = [].slice.call( this.el.querySelectorAll( 'ol.questions > li' ) );
// total questions
this.questionsCount = this.questions.length;
// show first question
classie.addClass( this.questions[0], 'current' );
// next question control
this.ctrlNext = this.el.querySelector( 'button.next' );
this.ctrlNext.setAttribute( 'aria-label', 'Next' );
// progress bar
this.progress = this.el.querySelector( 'div.progress' );
// set progressbar attributes
this.progress.setAttribute( 'role', 'progressbar' );
this.progress.setAttribute( 'aria-readonly', 'true' );
this.progress.setAttribute( 'aria-valuemin', '0' );
this.progress.setAttribute( 'aria-valuemax', '100' );
this.progress.setAttribute( 'aria-valuenow', '0' );
// question number status
this.questionStatus = this.el.querySelector( 'span.number' );
// give the questions status an id
this.questionStatus.id = this.questionStatus.id || randomID();
// associate "x / y" with the input via aria-describedby
for (var i = this.questions.length - 1; i >= 0; i--) {
var formElement = this.questions[i].querySelector( 'input, textarea, select' );
formElement.setAttribute( 'aria-describedby', this.questionStatus.id );
};
// current question placeholder
this.currentNum = this.questionStatus.querySelector( 'span.number-current' );
this.currentNum.innerHTML = Number( this.current + 1 );
// total questions placeholder
this.totalQuestionNum = this.questionStatus.querySelector( 'span.number-total' );
this.totalQuestionNum.innerHTML = this.questionsCount;
// error message
this.error = this.el.querySelector( 'span.error-message' );
// checks for HTML5 Form Validation support
// a cleaner solution might be to add form validation to the custom Modernizr script
this.supportsHTML5Forms = typeof document.createElement("input").checkValidity === 'function';
// init events
this._initEvents();
};
stepsForm.prototype._initEvents = function() {
var self = this,
// first input
firstElInput = this.questions[ this.current ].querySelector( 'input, textarea, select' ),
// focus
onFocusStartFn = function() {
firstElInput.removeEventListener( 'focus', onFocusStartFn );
classie.addClass( self.ctrlNext, 'show' );
};
// show the next question control first time the input gets focused
firstElInput.addEventListener( 'focus', onFocusStartFn );
// show next question
this.ctrlNext.addEventListener( 'click', function( ev ) {
ev.preventDefault();
self._nextQuestion();
} );
// pressing enter will jump to next question
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
// enter
if( keyCode === 13 ) {
ev.preventDefault();
self._nextQuestion();
}
} );
};
stepsForm.prototype._nextQuestion = function() {
if( !this._validate() ) {
return false;
}
// checks HTML5 validation
if ( this.supportsHTML5Forms ) {
var input = this.questions[ this.current ].querySelector( 'input, textarea, select' );
// clear any previous error messages
input.setCustomValidity( '' );
// checks input against the validation constraint
if ( !input.checkValidity() ) {
// Optionally, set a custom HTML5 valiation message
// comment or remove this line to use the browser default message
input.setCustomValidity( 'Whoops, that\'s not an email address!' );
// display the HTML5 error message
this._showError( input.validationMessage );
// prevent the question from changing
return false;
}
}
// check if form is filled
if( this.current === this.questionsCount - 1 ) {
this.isFilled = true;
}
// clear any previous error messages
this._clearError();
// current question
var currentQuestion = this.questions[ this.current ];
// increment current question iterator
++this.current;
// update progress bar
this._progress();
if( !this.isFilled ) {
// change the current question number/status
this._updateQuestionNumber();
// add class "show-next" to form element (start animations)
classie.addClass( this.el, 'show-next' );
// remove class "current" from current question and add it to the next one
// current question
var nextQuestion = this.questions[ this.current ];
classie.removeClass( currentQuestion, 'current' );
classie.addClass( nextQuestion, 'current' );
}
// after animation ends, remove class "show-next" from form element and change current question placeholder
var self = this,
onEndTransitionFn = function( ev ) {
if( support.transitions ) {
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
if( self.isFilled ) {
self._submit();
}
else {
classie.removeClass( self.el, 'show-next' );
self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
self.questionStatus.removeChild( self.nextQuestionNum );
// force the focus on the next input
nextQuestion.querySelector( 'input, textarea, select' ).focus();
}
};
if( support.transitions ) {
this.progress.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
// updates the progress bar by setting its width
stepsForm.prototype._progress = function() {
var currentProgress = this.current * ( 100 / this.questionsCount );
this.progress.style.width = currentProgress + '%';
// update the progressbar's aria-valuenow attribute
this.progress.setAttribute('aria-valuenow', currentProgress);
}
// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {
// first, create next question number placeholder
this.nextQuestionNum = document.createElement( 'span' );
this.nextQuestionNum.className = 'number-next';
this.nextQuestionNum.innerHTML = Number( this.current + 1 );
// insert it in the DOM
this.questionStatus.appendChild( this.nextQuestionNum );
}
// submits the form
stepsForm.prototype._submit = function() {
this.options.onSubmit( this.el );
}
// TODO (next version..)
// the validation function
stepsForm.prototype._validate = function() {
// current question´s input
var input = this.questions[ this.current ].querySelector( 'input, textarea, select' ).value;
if( input === '' ) {
this._showError( 'EMPTYSTR' );
return false;
}
return true;
}
// TODO (next version..)
stepsForm.prototype._showError = function( err ) {
var message = '';
switch( err ) {
case 'EMPTYSTR' :
message = 'Please fill the field before continuing';
break;
case 'INVALIDEMAIL' :
message = 'Please fill a valid email address';
break;
// ...
default :
message = err;
};
this.error.innerHTML = message;
classie.addClass( this.error, 'show' );
}
// clears/hides the current error message
stepsForm.prototype._clearError = function() {
classie.removeClass( this.error, 'show' );
}
// add to global namespace
window.stepsForm = stepsForm;
})( window );
答案 0 :(得分：-1)
你遗漏了很多大括号。
if ($reg) {
if ($em==$em2) {
// Check if user already exists
$u_check = mysql_query("SELECT username FROM users WHERE username='$Username'");
// Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
//Check whether Email already exists in the database
$e_check = mysql_query("SELECT email FROM users WHERE email='$Email'");
//Count the number of rows returned
$email_check = mysql_num_rows($e_check);
if ($check == 0) {
if ($email_check == 0) {
//check all of the fields have been filed in
if ($Name&&$Username&&$Email&&$Password) {
// check that passwords match
if ($Password) {
// check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($Username)>25||strlen($Name)>25) {
echo "The maximum limit for username/first name/last name is 25 characters!";
}else{
// check the maximum length of password does not exceed 25 characters and is not less than 5 characters
if (strlen($Password)>30||strlen($Password)<5) {
echo "Your password must be between 5 and 30 characters long!";
}else{
//encrypt password and password 2 using md5 before sending to database
$Password = md5($Password);
$query = mysql_query("INSERT INTO users VALUES ('','$Username','$Name',$Email','$Password','$d','0','Write something about yourself.','','','no')");
die("<h2>Welcome!/h2>Login to your account to get started ...");
}
}
}else{
echo "Sorry, but it looks like someone has already used that email!";
}
}else{
echo "Username already taken ...";
}
}
}
}
}