JavaScript-表单验证

Question

我正在尝试为文本输入验证创建功能，但该功能无法正常工作。

JavaScrip：

function validateText(id)
    {

    var x=document.forms["myForm"][id].value;
if (x==null || x=="")
  {
  var text = id+"Text";
  document.getElementById(text).style.visibility ="visible";

  }else {
     var text = id+"Text";
  document.getElementById(text).style.visibility="hidden";


      }
    }

HTML：

<label for="familyName">Family name</label>
<input type="text" id="familyName" id="familyName" onBlur="validateText(familyName)">
<p id="familyNameText">Test 123</p>

有人能帮我一下吗？

Answer 1

正如Kevmo提到的一个库，这是一个使用jquery的快速而肮脏的示例。 一旦掌握了jQuery的javascript基本知识，它将使您的生活变得更加轻松。

HTML并非没有对javascript函数的任何调用，并且我们的必填字段具有required类

<form id="formToValidate">
    <label for="familyName">Family name</label>
    <input type="text" id="familyName" id="familyName" class="required">
    <p class="requiredText">Family Name Required</p>
    <label for="familyName">First name</label>
    <input type="text" id="firstName" id="firstName" class="required">
    <p class="requiredText">First Name required</p>
    <label for="familyName">Dogs' name</label>
    <input type="text" id="dogName" id="dogName">
</form>

CSS只是一些基础知识

.requiredText {
    display:none;
    color:#F00;
}
label {
    display:inline-block;
    width:20%;
}
.required {
    border-color:#F33;
}

input {
    width:60%;
    border:solid 1px #CCC;
    margin-top:5px;
}

Javascript我从jquery使用了以下内容：

• 准备好文件
• 选择器
• 值
• 模糊事件处理程序
• 下一个

• 向下/向上滑动

   $(document).ready(function () { /* Execute when DOM is loaded */ /*Assign blur event handler to fields with required class */ /*I have used the id of the form (#formToValidate) to scope the selctor. Not required but a good practice*/ $("#formToValidate .required").blur(function () { if ($(this).val() === "") { /*Check the value of the item being blured"*/ $(this).next(".requiredText").slideDown('fast'); /* Slide down the nearest alert text sibling*/ } else { $(this).next(".requiredText").slideUp('fast'); /* Slide up the nearest alert text sibling*/ } }); }); 

请参见以下工作示例： http : //jsfiddle.net/9Mb29/