在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驗證輸入文本字段

回答

相關問題