Javascript表单验证

我试图找出验证必填字段的最简单方法，而不必为每个元素的名称执行if语句。也许只是使用一个循环来验证它的类

我试图完成的是只检查类名为“required”的类

---

谢谢

我建议您使用wich，它将获得特定类的所有元素。按照您提到的方式验证表单。

我使用jQuery插件。工作得非常好，并且符合您所说的只需要类属性的愿望

 $(document).ready( function() {
     $('form').validate();
 });

---

一旦标记了必填字段，就可以设置验证了。

我一点也不反对其他人建议的库，但我想您可能需要一些示例，说明如何自己完成验证，我希望这会有所帮助

这应该起作用：

function validate() {
    var inputs = document.getElementsByTagName("input");

    for (inputName in inputs) {
        if (inputs[inputName].className == 'required' && inputs[inputName].value.length == 0) {
            inputs[inputName].focus();
            return false;
        }
    }

    return true;       
}

也可以说您的输入是以一种名为“theForm”的形式进行的：

可以使用此方法在验证例程中运行正则表达式

function validate() {
    for (var i = 0; i < theForm.elements.length; i++) {
        var elem = theForm.elements[i];

        if (elem.getAttribute("validate") == "true") {
            if (!elem.value.match(elem.getAttribute("regex"))) {
                elem.select();
                return false;
            }
        }
    }

    return true;
}

函数验证（）{
对于（var i=0；i

---

希望这能有所帮助。

我已经使用了很长时间，而且效果很好的一种模式是用

DIV

或

p

包装控件，并根据需要进行标记

<div class="form-text required">
  <label for="fieldId">Your name</label>
  <input type="text" name="fieldName" id="fieldId" value="" />
</div>

在jQuery中，您可以使用以下内容测试输入：

$('form').submit(function(){
  var fields = $(this).find('input, textarea, select'); // get all controls
  fields.removeClass('invalid'); // remove
  var inv = $(this).find('input[value=""], select[value=""]');  // select controls that have no value
  if (inv.length > 0) {
    inv.addClass('invalid'); // tag wrapper 
    return false; // stop form from submitting
  }
  // else we may submit
});

在纯Javascript中，我不想键入，但大致如下：

var badfields = [];
var fields = theForm.getElementsByTagName('input');
for (var i=0; i< fields.length; i++ ) {
   if ( fields[i] && fields[i].parentNode && fields.value == '' &&
       /(^| )required( |$)/.test( fields[i].parentNode.className ) ) {
     badfields.push( fields[i] );
   }
}
// badfields.length > 0 == form is invalid

我建议使用现成的解决方案进行表单验证，因为它可以快速添加：如何验证复选框？是否需要复选框？（EULA？）单选按钮呢，您将如何检查这些按钮

---

大多数验证解决方案也会提供诸如验证正确数据（比如电子邮件地址）之类的支持，而不仅仅是检查数据是否存在。

我有点惊讶没有人提到YUI。 可以通过以下方式轻松使用Dom类的getElementsByClassName方法：

var aElements = YAHOO.util.Dom.getElementsByClassName('required', 'input');
for (var i = 0; i < aElements.length; i++)
{
   // Validate
}

var aElements=YAHOO.util.Dom.getElementsByClassName（'required'，'input'）；
对于（变量i=0；i

---

更多方法信息可用，更多常规信息在示例代码中，所有元素都具有相同的名称。。。因此，有2个必填项和1个非必填项似乎没有多大意义。

.required input, .required select 

$('form').submit(function(){
  var fields = $(this).find('input, textarea, select'); // get all controls
  fields.removeClass('invalid'); // remove
  var inv = $(this).find('input[value=""], select[value=""]');  // select controls that have no value
  if (inv.length > 0) {
    inv.addClass('invalid'); // tag wrapper 
    return false; // stop form from submitting
  }
  // else we may submit
});

var badfields = [];
var fields = theForm.getElementsByTagName('input');
for (var i=0; i< fields.length; i++ ) {
   if ( fields[i] && fields[i].parentNode && fields.value == '' &&
       /(^| )required( |$)/.test( fields[i].parentNode.className ) ) {
     badfields.push( fields[i] );
   }
}
// badfields.length > 0 == form is invalid

.required input, .required select {
  border : 1px solid red;
}
.required label {
  color : #800;
}
.invalid input, .invalid select {
  background-color : #f88;
}

var aElements = YAHOO.util.Dom.getElementsByClassName('required', 'input');
for (var i = 0; i < aElements.length; i++)
{
   // Validate
}