如果我想创建一个表单并验证它。如果验证成功,我会将这些数据插入到一个mysql数据库中。最好的方法是通过 HTML 创建一个表单,然后在 jQuery 中验证它并通过 PHP 将 post 方法中的数据提交到 mysql 数据库中?
欢迎任何简单的例子(提交名字和姓氏,两个字段都必须输入)。
我尝试了一些示例,但是当验证为假并且您丢失了文本框字段中的所有数据时,它们会重新加载页面。
在我看来,在插入/更新语句之前仍然需要服务器端验证以避免损坏的数据。
您可以使用 ajax 调用 PHP 脚本。这样,您将不会重新加载页面。
我的项目中的示例:
function initContactForm(){
$('#contact-form').validate({
errorClass: 'invalid-input',
validClass: 'valid-input',
debug: false,
rules: {
name: {
required: true,
minlength: 3
},
sername: {
required: true,
minlength: 3
},
company_name: {
required: true,
minlength: 3
},
phone: {
required: true,
digits: true,
minlength: 7
},
mail: {
required: true,
email: true
},
message: {
required: true,
minlength: 20
}
},
submitHandler: function(data){
$('#loading').ajaxStart(function(){
$(this).show('fast');
$('.register-btn').hide('fast');
});
$('#loading').ajaxStop(function(){
$(this).hide('fast')
});
$('#contact-form').ajaxSubmit(function(html){
$('.control-group').animate({ opacity: 0.2 }, 500, function(){ opacity: 1 });
$('#formHandler').html(html);
$('#formHandler').show('fast');
$('.alert').bind('close', function(){
$('#contact-form').each(function(){ this.reset(); });
$('.controls input').removeClass();
$('.controls textarea').removeClass();
$('.register-btn').show('fast');
$('.control-group').animate({ opacity: 1 }, 500, function(){ opacity: 0.2 });
});
});
}
});
}
每当您接受用户数据时,都应使用 JavaScript 对其进行验证,并且必须使用 PHP 对其进行验证。高级用户可以在他们的浏览器中禁用 JavaScript,这意味着他们可以忽略任何 JavaScript 或 jQuery 验证。
例如,此页面将使用客户端 JavaScript和PHP 验证数据:
<?php
// index.php
$firstname_val = '';
$firstname_text = '';
// if the firstname field isn't blank...
if(len(trim($_POST['firstname'])) > 0) {
// insert into your database
// if the firstname field _is_ blank...
} else {
// load the page
$firstname_val = 'This value cannot be blank';
// store the old value and re-insert it into the input field below
$firstname_text = htmlspecialchars($_POST['firstname']);
}
?><!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#go").click(function(e) {
// if the Firstname input isn't blank...
if($("#firstname_field").val().trim().length > 0) {
// clear the error message
$("#firstname_val").text("");
// submit the form
$("#form").submit();
// otherwise, if it is blank...
} else {
// prevent the form submission
e.preventDefault();
// show an error message
$("#firstname_val").text("This value cannot be blank");
}
});
});
</script>
</head>
<body>
<form action="index.php" method="post" id="form">
<input type="text" name="firstname" id="firstname_field" value="<?php echo $firstname_text;?>" /><br />
<span style="color:#f00;" id="firstname_val"><?php echo $firstname_val; ?></span><br />
<input type="submit" value="Go" id="go" />
</form>
</body>
</html>