我想验证此表单，忽略输入字段的默认值。我尝试了jQuery validate插件的所有可能方法。因为我是JS的初学者，所以很难理解如何使用它。
我的表单看起来像那样
<?php
require "core/code/includes/db.php";
if (mysqli_connect_errno()) {
printf("Baza ilə əlaqədə problem var: %s\n Xahiş edirik administrator ilə əlaqə yaradasınız: mail@tural.us", mysqli_connect_error());
exit();
}
?>
<form id="reg" method="post" action="core/code/functions/signup.php" onSubmit="return checkForm(this);">
<table width="270px" style="clear:both">
<tr>
<td class="numbers" rowspan="3">
1
</td>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
Əsas məlumatlar
</td>
</tr>
<tr>
<td ><input class="part1 default required" type="text" name="fname" value="Adınız" /></td>
<td ><input class="part1 default required" type="text" name="mname" value="Atanızın adı"/></td>
<td ><input class="part1 default" type="text" name="lname" value="Soyadınız" /></td>
</tr>
...
...
<input class="button button-gray" type="submit" value="Tamam" name="submit"/>
</p>
</form>
<script type="text/javascript" src="core/code/js/jquery-ui.js"></script>
<script src="core/code/js/mask.js"></script>
<script src="core/code/js/reg.js"></script>
<script type="text/javascript" src="core/code/js/acompl.js"></script>
和reg.js
var defaultValues = {
'fname': 'Adınız',
'mname': 'Atanızın adı',
'lname': 'Soyadınız',
'phone': 'Telefon',
'email': 'Email',
'pwd':'Şifrə',
'region':'Rayon',
'school':'Məktəb',
'login':'Istifadəçi adı',
'class':'Sinif',
'subject':'Fənnin adını daxil edin',
'dob': 'Date of Birth'
};
$('input').live('focus', function() {
var el = $(this);
if (el.hasClass('default')) {
el.removeClass('default').val('');
}
if (el.attr('id') === 'dob') {
$(this).mask('99.99.9999', {placeholder:' '});
}
});
$('input').live('blur', function() {
var el = $(this);
var name = el.attr('name');
// Really we only want to do anything if the field is *empty*
if (el.val().match(/^[\s\.]*$/)) {
// To get our default style back, we'll re-add the classname
el.addClass('default');
// Unmask the 'dob' field
if (name == 'dob') {
el.unmask();
}
// And finally repopulate the field with its default value
el.val(defaultValues[name]);
}
});
答案 0 :(得分：2)
首先，我认为您应该为每个表单元素添加id。我认为jQuery不会使用name来获取DOM元素。您的表单有一个id但不是您的输入元素。
例如，请参阅下面的输入元素（id可以与名称相同）：
<input class="part1 default required" type="text" name="pwd" id="pwd" value="Adınız" />
现在你可以通过jQuery抓取那个元素：alert($('#pwd').val());
#之前的pwd表示该元素正在被其ID选中。
你也可以通过像这样引用它的类来选择一个元素：alert($('.className').val());但是这会选择所有匹配的元素，并且应用相同的类。做出单一和具体的选择;你应该使用ID。
所以，如果我理解你的问题是正确的;您可以通过检查这些元素是否具有默认值或它们是否为空来验证这些元素的值。然后检查其他标准，如密码长度等。
$('#reg').submit(function (event)
{
if ($('#pwd').val() == defaultValues['pwd'] || $.trim($('#pwd').val()) == '')
{
alert('Please enter a password!');
return false;
}
else
{
if ($('#pwd').val().length < 8)
{
alert('Password must have 8 characters at least!');
return false;
}
}
});
注意：我同意贾里德的观点。您也应该在服务器端验证此表单;因为代码在浏览器中可见，并且很容易被旁路。
答案 1 :(得分：2)
这在某种程度上可能有些过分，但我想在这里展示一些不同的东西。主要有：
$.data()存储与元素相关的数据阅读评论，如果您有任何问题，请与我们联系。
模拟HTML
<form id="reg" method="post" action="core/code/functions/signup.php">
<table width="270px" style="clear:both">
<tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">Əsas məlumatlar</td>
</tr>
<tr>
<td><input class="part1 default required" type="text" name="fname" value=""/></td>
<td><input class="part1 default required" type="text" name="mname" value=""/></td>
<td><input class="part1 default" type="text" name="lname" value=""/></td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
Password: <input class="part1 default required" type="text" name="pwd"/>
</td>
<tr>
</tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
DOB: <input class="part1 default required" type="text" name="dob"/>
</td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
Phone: <input class="part1 default" type="text" name="phone"/>
</td>
</tr>
</table>
<p><input class="button button-gray" type="submit" value="Tamam" name="submit"/></p>
</form>
<强>的Javascript
// An object containing different fields by name and
// objects that provide information about the object the
// name points to. 'default' property is required.
var defaultValues = {
'fname': {'default':'Adınız'},
'mname': {'default':'Atanızın adı'},
'lname': {'default':'Soyadınız'},
'phone': {'default':'Telefon'},
'email': {'default':'Email'},
'pwd': {
'default':'Şifrə',
// Text used to display a custom error text.
// Otherwise, the default text will be used.
'errortext':'Password must be 5 characters or more in length',
// A custom function to be called when the element is validated
// and/or checked for default. This is added as a custom event
// handler called 'validation' and called on blur.checkRequired
// and from the function checkRequired() when the
// blur.checkRequired is triggered. The 'notvalidated' data
// element is how the validation failure is passed back to
// blur.checkDefault event.
'onvalidation': function(){
if (this.value.length < 5) {
$(this).data('notvalidated',true);
} else {
$(this).data('notvalidated',false);
}
}
},
'region': {'default':'Rayon'},
'school': {'default':'Məktəb'},
'login': {'default':'Istifadəçi adı'},
'class': {'default':'Sinif'},
'subject': {'default':'Fənnin adını daxil edin'},
'dob': {
'default':'Date of Birth',
// An alternate value to check for, in addition to
// the default. More complex checks should be checked
// through the onvalidation handler.
'validate':' . . ',
'errortext':'A correct Date of Birth must be entered.'
}
};
function checkRequired() {
// We will attach the error list to the body tag.
var $body = $('body');
// This array will store the actual errors, but this specfically
// clears previous errors caught.
$body.data('requiredErrors',[]);
$('input.required').each(function(){
// Trigger is used to manually call the blur.checkRequired
// handler.
$(this).trigger('blur.checkRequired');
});
// Get a reference to the errors generated by the triggered
// event handler.
var errors = $body.data('requiredErrors');
if (errors.length > 0) {
// This will allow you output an error to the user.
var errortext = "There were "+errors.length+" errors "+
"submitting the form.<br/>"+
"These errors must be fixed before submitting the form."+
"<ul>";
for (var i = 0; i < errors.length; i++) {
errortext += "<li>"+errors[i]+"</li>";
}
errortext += '</ul>';
errortext = '<div id="requiredErrorsText">'+errortext+'</div>';
// First try to remove it if it's already showing.
$('#requiredErrorsText').remove();
// At it to the top of the form.
$(errortext).prependTo('form');
// Return false to the submit event handler to prevent the form
// from submitting.
return false;
}
// Return true to allow the form to continue submitting.
return true;
}
$(document).ready(function(){
// Set the initial errors log array.
$('body').data('requiredErrors',[]);
// Loop through and apply the defaultValues object information
// to the related elements.
for (var name in defaultValues) {
// Name is the key object reference and should point to an
// input element with the name attribute equal to it.
var $this = $('input[name="'+name+'"]');
var validate = '';
var errortext = '';
// Only do the apply if their are elements found.
if ($this.length != 0) {
// Add the custom or default value to validate against.
// If both are available, it will check both during the
// blur.checkRequired handler.
if (defaultValues[name].hasOwnProperty('validate')) {
validate = defaultValues[name].validate;
} else {
validate = defaultValues[name].default;
}
// Set the value for the error text to display, defaulting
// to the 'default' value if the property does not exist.
if (defaultValues[name].hasOwnProperty('errortext')) {
errortext = defaultValues[name].errortext;
} else {
errortext = defaultValues[name].default;
}
// Add the validation event handler, if present.
if (typeof defaultValues[name].onvalidation == 'function') {
$this.bind('validation',defaultValues[name].onvalidation);
// Tell the blur.checkRequired() to run the validator handler.
$this.data('usevalidator',true);
} else {
$this.data('usevalidator',false);
}
// Set the default value to the... default value if it is present
// and the element's value is empty. Note, this will allow you to
// not overwrite values returned by a roundtrip to the server
// (in case the submit handler does not prevent the form being
// being submitted.
if ($this.val() == '' && defaultValues[name].default) {
$this.val(defaultValues[name].default);
}
// Set custom attributes for the related values.
$this.attr('default',defaultValues[name].default);
$this.attr('validate',validate);
$this.attr('errortext',errortext);
}
}
$('form').submit(function(){
// NOTE!!! I am return false to prevent the form in jsfiddle
// from submitting the form EVER. This is just for diagnostic
// reasons, it should not done in your production script.
if (checkRequired()) {
alert('Form will submit.');
} else {
alert('Form will NOT submit');
return false;
}
// Remove this when you want to use this for real.
return false;
});
// We will use a cached jQuery object.
$default = $('input[type="text"][default],input[type="text"].required');
// See http://api.jquery.com/bind/ for more on custom events,
// including namespaced events like blur.checkRequired.
$default.live('blur.checkRequired',function(){
var $this = $(this);
var $body = $('body');
var notvalidated = true;
// Having the 'required' class on the input causes it to
// check for validation.
if ($this.hasClass('required')) {
// Triggers the custom validation handler.
if ($this.data('usevalidator') === true) {
$this.trigger('validation');
}
notvalidated = $this.val() == '' ||
$this.val() == $this.attr('default') ||
$this.val() == $this.attr('validate') ||
$this.data('notvalidated') === true;
if (notvalidated) {
$body.data('requiredErrors').push($this.attr('errortext'));
$this.addClass('requiredError');
} else {
$this.removeClass('requiredError');
}
}
});
// Namespaced handlers prepended with a regular handler like
// blur, focus, etc... will be fired with the regular handler.
$default.live('focus.checkDefault', function() {
var el = $(this);
if (el.hasClass('default')) {
el.removeClass('default').val('');
}
if (el.attr('name') === 'dob') {
$(this).mask('99.99.9999', {placeholder:' '});
}
});
$default.live('blur.checkDefault', function() {
var el = $(this);
var name = el.attr('name');
// Really we only want to do anything if the field is *empty*
if (el.val().match(/^[\s\.]*$/)) {
// To get our default style back, we'll re-add the classname
el.addClass('default');
// Unmask the 'dob' field
if (name == 'dob') {
el.unmask();
}
// And finally repopulate the field with its default value
el.val(el.attr('default'));
}
});
});