我想validation此表单忽略输入字段的默认值。 我尝试了jQuery validate插件的所有可能方法。 因为我是JS的初学者，所以很难理解如何使用它。
我的表格看起来像那样
1 Əsas məlumatlar ... ... 并且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]); } }); 首先，我认为你应该为每个表单元素添加一个id 。 我不认为jQuery会以其name获取DOM元素。 您的表单有一个id但不是您的输入元素。 例如，请参阅下面的input元素（id可以与名称相同）： 现在你可以通过jQuery抓取那个元素： alert($('#pwd').val()); pwd之前的#表示该元素正由其id选择。 你也可以通过像这样引用它的类来选择一个元素： alert($('.className').val()); 但是这将选择应用了相同类的所有匹配元素。 做出单一和具体的选择; 你应该使用ID。 所以，如果我理解你的问题是正确的; 您可以通过检查这些元素是否具有默认值或它们是否为空来validation这些元素的值。 然后检查其他标准，如密码长度等。 $('#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; } } }); 注意：我同意Jared的观点。 您也应该在服务器端validation此表单; 因为代码在浏览器中可见，并且很容易被旁路。 这在某种程度上可能有点过分，但我想在这里展示一些不同的东西。 主要有： 命名空间事件处理程序 自定义事件处理 触发事件处理程序 使用一系列错误检测和处理错误 使用属性和$.data()来存储与元素相关的数据 使用结构化对象配置表单 阅读评论，如果您有任何疑问，请告诉我。 模拟HTML Əsas məlumatlar Password: DOB: Phone: 使用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."+ "These errors must be fixed before submitting the form."+ ""; for (var i = 0; i < errors.length; i++) { errortext += ""+errors[i]+""; } errortext += ''; errortext = ''+errortext+''; // 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')); } }); }); http://jsfiddle.net/userdude/CMmDF/ 用于’鼠标方向’hover的jQuery动画 为什么firebug说我的函数调用是“未定义的” 使用日期字符串数组在bootstrap datepicker中设置禁用月数不起作用textarea关于输入问题只有在输入中使用点（不是逗号）浮点值 – jQuery如果从锚链接重定向，Rails将不会重新加载本地javascript使用jQuery或JavaScript绑定到自定义CSS动画结束事件？fullCalendar 1.5.3创建了多个事件，无法删除未选中的事件使用offset和jQuery滑块如何使用ajax调用从servlet到jsp获取arraylist数据重定向到感谢页面后SESSION值没有传递 Go! Interesting Posts 基于Modernizr的不同方法：click vs hover如果可能，使用AJAX从URL获取JSON数据如何禁用低带宽连接的jquery包含在preventDefault之后无法提交jQuery循环插件，每个幻灯片具有不同的超时值将AJAX JSON对象复制到现有Object中去抖动jquery滚动事件WebSQL事务不会在JS回调函数中运行AJAX函数无法通过滚动工作正则表达式
并且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]); } });
首先，我认为你应该为每个表单元素添加一个id 。 我不认为jQuery会以其name获取DOM元素。 您的表单有一个id但不是您的输入元素。
id
name
例如，请参阅下面的input元素（id可以与名称相同）：
现在你可以通过jQuery抓取那个元素： alert($('#pwd').val());
alert($('#pwd').val());
pwd之前的#表示该元素正由其id选择。 你也可以通过像这样引用它的类来选择一个元素： alert($('.className').val()); 但是这将选择应用了相同类的所有匹配元素。 做出单一和具体的选择; 你应该使用ID。
pwd
#
alert($('.className').val());
所以，如果我理解你的问题是正确的; 您可以通过检查这些元素是否具有默认值或它们是否为空来validation这些元素的值。 然后检查其他标准，如密码长度等。
$('#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; } } });
注意：我同意Jared的观点。 您也应该在服务器端validation此表单; 因为代码在浏览器中可见，并且很容易被旁路。
这在某种程度上可能有点过分，但我想在这里展示一些不同的东西。 主要有：
$.data()
阅读评论，如果您有任何疑问，请告诉我。
模拟HTML
Əsas məlumatlar Password: DOB: Phone:
使用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."+ "These errors must be fixed before submitting the form."+ ""; for (var i = 0; i < errors.length; i++) { errortext += ""+errors[i]+""; } errortext += ''; errortext = ''+errortext+''; // 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')); } }); });
http://jsfiddle.net/userdude/CMmDF/