使用javascript进行注册表单验证-Java 学习之路

-2

我部分在那里，但如果你们中的任何人可以发送整个代码将是有帮助的 .

1）使用以下给定字段创建表单，并使用javascript或jquery对其进行验证 .

名称：文本框 - 必填
性别：单选按钮
年龄：文本框 - 仅接受号码 - （检查有效年龄标准）
电子邮件：文本框 - 格式为example@gmail.com
网站：文本框 - 格式应为http://www.example.com
国家/地区：选择包含10个国家/地区的框
移动：文本框 - 应为10位数字 - 仅在用户选择国家/地区后显示此字段
社交媒体帐户：Facebook，Google，Twitter（3个复选框） - 仅在选定的国家/地区为印度时显示社交媒体部分
我同意条款和条件 - 复选框

所有字段都是必填字段，并显示所有字段的错误消息（如果无效）仅允许在选中“我同意”复选框后提交表单 .

3 回答

<!DOCTYPE html>
   <html>
   <head>

    <title>Get Values Of Form Elements Using jQuery</title>

  <!-- Include CSS File Here -->
 <link rel="stylesheet" href="form_value.css"/>
 <!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<script type="text/javascript" src="form_value.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
$("#social").hide() ;
 // $("#hide").click(function(){
  // $("social").hide();
  // });
  // var country = document.getElementByName("country")[0].value;
  // if (country.value == "India") {
  //     $("#show").click(function(){
    //     $("social").show();
    // });
   // }


  if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.email_id.value)) {
                alert("You have entered an invalid email address!")
                return (false)
            }
       });

  </script>

  </head>

 <body onload="disableSubmit()">

 <div class="container">
 <div class="main">
 <h2>Get Values Of Form Elements Using jQuery</h2>
 <form action="">
 <!-- Text -->
 <br>
 <br>
 <label>Name :</label>
 <input type="text" id="text" name="name" value=""required/><br>


 <!-- Radio Button -->
 <br><br><br>
 <label>Gender:</label>
 <input type="radio" name="male" value="Male">Male
 <input type="radio" name="female" value="Female">Female

 <br><br>
 <!-- Textarea -->
 <label>Email :</label>
 <input type="text" id="Email" value="" id="Email"/>
  <br>


 <br><br>
   Age: <input type="text" id="Age" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" />
  <span id="error" style="color: Red; display: none">* Input digits (0 -  9)</span>


 <br><br>
 <label> Website:</label>
 <input type="text" id="text" value="" name = "Website" id="website" />
 <script type="text/javascript">
  function validate() {
    if(Website.value.length==0)
   {
    document.getElementById("Website").innerHTML="Should be in the format     http://www.example.com ";
   }
       }
    </script>

   <br><br>

  <label>Country:</label>
   <select class="country" id = "country">
                <option>Select</option>
                <option value="usa">United States</option>
                <option value="india">India</option>
                <option value="uk">United Kingdom</option>
                <option value="uae">United Arab Emirates</option>
                <option value="germany">Germany</option>
                <option value="france">France</option>
                <option value="netherlands">Netherlands</option>
                <option value="yemen">Yemen</option>
                <option value="pakistan">Pakistan</option>
                <option value="russia">Russia</option>

            </select>

            <br><br>

      <label>Mobile:</label>     
      <input type="text" id="phone" name="phone" onkeypress="phoneno()"   maxlength="10">
       <script type="text/javascript">        
       function phoneno(){          
        $('#phone').keypress(function(e) {
            var a = [];
            var k = e.which;

            for (i = 48; i < 58; i++)
                a.push(i);

            if (!(a.indexOf(k)>=0))
                e.preventDefault();
        });
    }
   </script>

       <br><br>
        <div id = "social" >
       <p>Social Media Accounts.</p>  <input type="checkbox"   id="Facebook"   value="Facebook"><label for="Facebook"> Facebook</label><br>  <input type="checkbox" id="Google" value="Google"><label for="Google"> CSS</label><br>  <input type="checkbox" id="Twitter" value="Twitter"><label for="Twitter"> Twitter</label><br>
   </div>


     <br>
     <br>

     <script>
     function disableSubmit() {
     document.getElementById("submit").disabled = true;
     }

     function activateButton(element) {

     if(element.checked) {
      document.getElementById("submit").disabled = false;
      }
      else  {
    document.getElementById("submit").disabled = true;
     }

      }
   </script>
   <input type="checkbox" name="terms" id="terms"     onchange="activateButton(this)">  I Agree Terms & Coditions
        <br><br>

    <input type="submit" name="submit" id="submit">
    </script>
     </form>
    </div>
    </body>
     </html>

回复于 2024-04-26T11:36:32+08:00

this is my js page content form_value.js



       $(document).ready(function() {
       // Function to get input value.
       $('#text_value').click(function() {
        var text_value = $("#text").val();
        if(text_value=='') {
        alert("Enter Some Text In Input Field");
         }else{
        alert(text_value);
         }
         });


        // Funtion to get checked radio's value.
        $('#gender_value').click(function() {
         $('#result').empty();
         var value = $("form input[type='gender']:checked").val();
         if($("form input[type='gender']").is(':checked')) {
          $('#result').append("Checked Radio Button Value is :<span> "+             value +" </span>");
       }else{
       alert(" Please Select any Option ");
        }
       });
     // Get value Onchange radio function.
       $('input:gender').change(function(){
      var value = $("form input[type='gender']:checked").val();
      alert("Value of Changed Radio is : " +value);
          });
      // Funtion to reset or clear selection.
      $('#radio_reset').click(function() {
       $('#result').empty();
      $("input:radio").attr("checked", false);
          });



        $('#Email').click(function() {
       function validate(Email) {

        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-    z]{2,4})$/;
        //var address = document.getElementById[email].value;
        if (reg.test(email) == false) 
        {
            alert('Should be in the format example@gmail.com');
            return (false);
        }
         }

          });
          });

      $("#Age").click(function() {
            var specialKeys = new Array();
             specialKeys.push(8); //Backspace
             function IsNumeric(e) {
             var keyCode = e.which ? e.which : e.keyCode
                var ret = ((keyCode >= 48 && keyCode <= 57) ||         specialKeys.indexOf(keyCode) != -1);
             document.getElementById("error").style.display = ret ?  "none" : "inline";
        return ret;
            }
            function handleChange(input) {
           if (input.value < 0) input.value = 0;
            if (input.value > 100) input.value = 100;
             }
             });


        </script>

回复于 2024-04-26T11:36:32+08:00

<!DOCTYPE html> <html> <head> <script> function validateForm() {
var name = document.forms["myForm"]["fname"].value;
var gender = document.forms["myForm"]["gender"].value;
var age = document.forms["myForm"]["age"].value;
var a = parseInt(age);
var email = document.forms["myForm"]["email"].value;
var url = document.forms["myForm"]["website"].value;
var country = document.forms["myForm"]["country"].value;
var mobileCountry = document.forms["myForm"]["mobileCountry"].value;
var mcLength = mobileCountry.length;



if (name == "") {
    alert("Name Field is mandatory");
     return false;
}
if (gender != "male" && gender != "female") {
    alert("Atleast one Gender has to be chosen");
     return false;
}
if(isNaN(a)){
    alert("Age is compulsory and must be a number");
     return false;
}

if(email == ""){
    alert("Email address is required");
}
else if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){

} else{
    alert("Email address entered is invalid");
     return false;
}
if(/^(ftp|http|https):\/\/[^ "]+$/.test(url)){

} else{
    alert("Website url entered is invalid");
     return false;
}
if(country != "choose"){
        document.getElementById("mc").style.display = "block";
} else{
        document.getElementById("mc").style.display = "none";
}

if(mcLength != 10){
        alert("Number must be ten digits");
        return false;
}

 } function displaySocial(){        var social = 
document.getElementById("social");
    var mc = document.getElementById("mobileCountry");

    var country = document.getElementById("country");
    var selectedValue = country.options[country.selectedIndex].value;
if (selectedValue != "choose")    {
   if(selectedValue == "india"){
    if(social.style.display = "none"){
        social.style.display = "block";
    } else{
        social.style.display = "none";
    }    } else{
    social.style.display = "none";    }

if(mc.style.display = "none"){

    mc.style.display = "block";
        } else{
    mc.style.display = "none";    }    } else{
    mc.style.display = "none";    }

} </script> </head> <body> <form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"><br> Gender: <input type="radio" name="gender" value="male"> Male <input type="radio" value="female" name="gender"> Female <br> age: <input type="text" name="age"><br> email: <input type="text" name="email"><br> website: <input type="text" name="website"><br> country: <select type="text" name="country" id="country"  onclick="displaySocial()"><option value="choose">--choose--</option><option value="usa">USA</option><option value="uk">UK</option><option value="ng">Nigeria</option><option value="india">India</option></select><br> <span id="mobileCountry" style="display: none;">mobile country: <input type="text" name="mobileCountry"><br></span> <span id="social" style="display: none;">Social Media: <input type="radio" name="gender"> Facebook <input type="radio" name="gender"> Google <input type="radio" name="gender"> Twitter</span> <br> <p> <input type="submit" value="Submit"> </form> <p id="error"></p> </body> </html>

回复于 2024-04-26T11:36:32+08:00

使用javascript进行注册表单验证

3 回答

相关问题