在html中使用javascript验证输入文本字段

<script type='text/javascript'> 
function required() 
{ 
    var empt = document.forms["form1"]["Name"].value; 
    if (empt == "") 
    { 
     alert("Please input a Value"); 
     return false; 
    } 
} 
</script> 

<form name="form1" method="" action=""> 
<input type="text" name="name" value="Name"/><br /> 
<input type="text" name="address line1" value="Address Line 1"/><br />

我有多个输入文本字段，每个都有其默认值。在提交表格之前，我必须确认是否填写了所有字段。到目前为止，我得到的JavaScript检查为空，因为不同的文本框有不同的默认值。我如何编写一个JavaScript来验证用户是否输入了数据？我的意思是，脚本必须确定输入数据不是默认值，并且为空。在html中使用javascript验证输入文本字段

来源

2012-09-17 VinKrish

可以使用HTML5验证。这非常简单，您也可以自定义您的消息。现在不需要任何用于客户端验证的javascript或jquery方法。你可以检查这个[链接]（http://stephenwalther.com/archive/2012/03/13/html5-form-validation.aspx） – Sujanth

如果您没有使用jQuery，那么我会简单地编写一个验证方法，您可以在提交表单时触发它。该方法可以验证文本字段以确保它们不是空的或默认值。该方法将返回一个布尔值，如果它为false，则可以关闭警报并分配类以突出显示未通过验证的字段。

HTML：

<form name="form1" method="" action="" onsubmit="return validateForm(this)"> 
<input type="text" name="name" value="Name"/><br /> 
<input type="text" name="addressLine01" value="Address Line 1"/><br /> 
<input type="submit"/> 
</form>

的JavaScript：

function validateForm(form) { 

    var nameField = form.name; 
    var addressLine01 = form.addressLine01; 

    if (isNotEmpty(nameField)) { 
     if(isNotEmpty(addressLine01)) { 
      return true; 
     { 
    { 
    return false; 
} 

function isNotEmpty(field) { 

    var fieldData = field.value; 

    if (fieldData.length == 0 || fieldData == "" || fieldData == fieldData) { 

     field.className = "FieldError"; //Classs to highlight error 
     alert("Please correct the errors in order to continue."); 
     return false; 
    } else { 

     field.className = "FieldOk"; //Resets field back to default 
     return true; //Submits form 
    } 
}

的validateForm方法分配要验证，然后在这种情况下，元素调用isNotEmpty方法来验证，如果该字段为空或有未从默认值更改。它会一直调用inNotEmpty方法，直到它返回true的值，或者如果条件失败，那么它将返回false。

给这个镜头，让我知道它是否有帮助，或者如果您有任何问题。当然你可以编写额外的自定义方法来验证数字，电子邮件地址，有效的URL等。

如果你使用jQuery，我会考虑尝试jQuery验证插件。我一直在使用它为我的最后几个项目，这是非常好的。如果有机会，请检查一下。 http://docs.jquery.com/Plugins/Validation

来源

2012-09-17 15:15:52

感谢您的回复，您的方法是直截了当，但不知何故我无法即使在填写完所有文本框后也要获得“FieldOk”，它会显示“请更正错误以继续”。 – VinKrish

嘿，对不起，花了一段时间才回到你身边......在这个例子中，我没有包括FieldOk和FieldError CSS类。您可以创建一个集合，然后将文本和字段颜色的值设置为在出现错误时变为红色，然后在字段验证时将其设置回默认值。 –

我刚刚注意到为什么我得到错误警报，fieldData与fieldData进行比较，这显然是真的总是相反，我需要一个函数来验证输入字段不是文本输入中的默认值。 – VinKrish

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Validation</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      var tags = document.getElementsByTagName("input"); 
      var radiotags = document.getElementsByName("gender"); 
      var compareValidator = ['compare']; 
      var formtag = document.getElementsByTagName("form"); 
      function validation(){ 
       for(var i=0;i<tags.length;i++){ 
        var tagid = tags[i].id; 
        var tagval = tags[i].value; 
        var tagtit = tags[i].title; 
        var tagclass = tags[i].className; 
        //Validation for Textbox Start 
        if(tags[i].type == "text"){ 
         if(tagval == "" || tagval == null){ 
          var lbl = $(tags[i]).prev().text(); 
          lbl = lbl.replace(/ : /g,'') 
          //alert("Please Enter "+lbl); 
          $(".span"+tagid).remove(); 
          $("#"+tagid).after("<span style='color:red;' class='span"+tagid+"'>Please Enter "+lbl+"</span>"); 
          $("#"+tagid).focus(); 
          //return false; 
         } 
         else if(tagval != "" || tagval != null){ 
          $(".span"+tagid).remove(); 
         } 
         //Validation for compare text in two text boxes Start 
         //put two tags with same class name and put class name in compareValidator. 
         for(var j=0;j<compareValidator.length;j++){ 
          if((tagval != "") && (tagclass.indexOf(compareValidator[j]) != -1)){ 
           if(($('.'+compareValidator[j]).first().val()) != ($('.'+compareValidator[j]).last().val())){ 
            $("."+compareValidator[j]+":last").after("<span style='color:red;' class='span"+tagid+"'>Invalid Text</span>"); 
            $("span").prev("span").remove(); 
            $("."+compareValidator[j]+":last").focus(); 
            //return false; 
           } 
          } 
         } 
         //Validation for compare text in two text boxes End 
         //Validation for Email Start 
         if((tagval != "") && (tagclass.indexOf('email') != -1)){ 
         //enter class = email where you want to use email validator 
          var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ 
          if (reg.test(tagval)){ 
           $(".span"+tagid).remove(); 
           return true; 
          } 
          else{ 
           $(".span"+tagid).remove(); 
           $("#"+tagid).after("<span style='color:red;' class='span"+tagid+"'>Email is Invalid</span>"); 
           $("#"+tagid).focus(); 
           return false; 
          } 
         } 
         //Validation for Email End 
        } 
        //Validation for Textbox End 
        //Validation for Radio Start 
        else if(tags[i].type == "radio"){ 
        //enter class = gender where you want to use gender validator 
         if((radiotags[0].checked == false) && (radiotags[1].checked == false)){ 
          $(".span"+tagid).remove(); 
          //$("#"+tagid").after("<span style='color:red;' class='span"+tagid+"'>Please Select Your Gender </span>"); 
          $(".gender:last").next().after("<span style='color:red;' class='span"+tagid+"'> Please Select Your Gender</span>"); 
          $("#"+tagid).focus(); 
          i += 1; 
         } 
         else{ 
          $(".span"+tagid).remove(); 
         } 
        } 
        //Validation for Radio End    
        else{ 

        } 
       } 
       //return false; 
      } 
      function Validate(){ 
       if(!validation()){ 
        return false; 
       } 
       return true; 
      } 
      function onloadevents(){ 
       tags[tags.length -1].onclick = function(){ 
        //return Validate(); 
       } 
       for(var j=0;j<formtag.length;j++){ 
        formtag[j].onsubmit = function(){ 
         return Validate(); 
        } 
       } 
       for(var i=0;i<tags.length;i++){ 
        var tagid = tags[i].id; 
        var tagval = tags[i].value; 
        var tagtit = tags[i].title; 
        var tagclass = tags[i].className; 
        if((tags[i].type == "text") && (tagclass.indexOf('numeric') != -1)){ 
         //enter class = numeric where you want to use numeric validator 
         document.getElementById(tagid).onkeypress = function(){ 
          numeric(event); 
         } 
        } 
       } 
      } 
      function numeric(event){ 
       var KeyBoardCode = (event.which) ? event.which : event.keyCode; 
       if (KeyBoardCode > 31 && (KeyBoardCode < 48 || KeyBoardCode > 57)){ 
        event.preventDefault(); 
        $(".spannum").remove(); 
        //$(".numeric").after("<span class='spannum'>Numeric Keys Please</span>"); 
        //$(".numeric").focus(); 
        return false; 
       } 
        $(".spannum").remove(); 
        return true; 
      } 
      if (document.addEventListener) { 
       document.addEventListener("DOMContentLoaded", onloadevents, false); 
      } 
      //window.onload = onloadevents; 
     </script> 
    </head> 
    <body> 
     <form method="post"> 
      <label for="fname">Test 1 : </label><input type="text" title="Test 1" id="fname" class="form1"><br> 
      <label for="fname1">Test 2 : </label><input type="text" title="Test 2" id="fname1" class="form1 compare"><br> 
      <label for="fname2">Test 3 : </label><input type="text" title="Test 3" id="fname2" class="form1 compare"><br> 
      <label for="gender">Gender : </label> 
      <input type="radio" title="Male" id="fname3" class="gender" name="gender" value="Male"><label for="gender">Male</label> 
      <input type="radio" title="Female" id="fname4" class="gender" name="gender" value="Female"><label for="gender">Female</label><br> 
      <label for="fname5">Mobile : </label><input type="text" title="Mobile" id="fname5" class="numeric"><br> 
      <label for="fname6">Email : </label><input type="text" title="Email" id="fname6" class="email"><br> 
      <input type="submit" id="sub" value="Submit"> 
     </form> 
    </body> 
</html>

来源

2013-11-11 07:17:54 AKHIL

function hasValue(val) { // Return true if text input is valid/ not-empty 
    return val.replace(/\s+/, '').length; // boolean 
}

多个元素，你可以自己的价值通过你的投入要素内循环到该函数的参数。

如果用户插入一个或多个空格，多亏了正则表达式s+该函数将返回false。

来源

2015-02-12 23:18:02

<form name="myForm" id="myForm" method="post" onsubmit="return validateForm();"> 
    First Name: <input type="text" id="name" /> <br /> 
    <span id="nameErrMsg" class="error"></span> <br /> 
    <!-- ... all your other stuff ... --> 
</form> 
    <p> 
    1.word should be atleast 5 letter<br> 
    2.No space should be encountered<br> 
    3.No numbers and special characters allowed<br> 
    4.letters can be repeated upto 3(eg: aa is allowed aaa is not allowed) 
    </p> 
    <button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button> 


validateForm = function() { 
    return checkName(); 
} 

function checkName() { 
    var x = document.myForm; 
    var input = x.name.value; 
    var errMsgHolder = document.getElementById('nameErrMsg'); 
    if (input.length < 5) { 
     errMsgHolder.innerHTML = 
      'Please enter a name with at least 5 letters'; 
     return false; 
    } else if (!(/^\S{3,}$/.test(input))) { 
     errMsgHolder.innerHTML = 
      'Name cannot contain whitespace'; 
     return false; 
    }else if(!(/^[a-zA-Z]+$/.test(input))) 
    { 
     errMsgHolder.innerHTML= 
       'Only alphabets allowed' 
    } 
    else if(!(/^(?:(\w)(?!\1\1))+$/.test(input))) 
    { 
     errMsgHolder.innerHTML= 
       'per 3 alphabets allowed' 
    } 
    else { 
     errMsgHolder.innerHTML = ''; 
     return undefined; 
    }  

} 

.error { 
color: #E00000; 
}

来源

2016-10-05 11:43:29 Hemangi

<pre><form name="myform" action="saveNew" method="post" enctype="multipart/form-data"> 
    <input type="text" id="name" name="name" /> 
<input type="submit"/> 
</form></pre> 

<script language="JavaScript" type="text/javascript"> 
var frmvalidator = new Validator("myform"); 
    frmvalidator.EnableFocusOnError(false); 
    frmvalidator.EnableMsgsTogether(); 
    frmvalidator.addValidation("name","req","Plese Enter Name"); 

</script> 




before using above code you have to add the gen_validatorv31.js js file

来源

2017-11-17 10:58:48

在html中使用javascript验证输入文本字段

回答

相关问题