Question

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

1）创建一个包含以下给定字段的表单，并使用javascript或jquery对其进行验证。

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

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

Answer 1

   <!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>

Answer 2

    using System;
using System.Diagnostics;
using System.Windows.Automation;

namespace chromeTabsTest
{
    class Program
    {
        static void Main(string[] args)
        {
            Process[] procsChrome = Process.GetProcessesByName("chrome");
            if (procsChrome.Length <= 0)
            {
                Console.WriteLine("Chrome is not running");
            }
            else
            {
                foreach (Process proc in procsChrome)
                {
                    // the chrome process must have a window 
                    if (proc.MainWindowHandle == IntPtr.Zero)
                    {
                        continue;
                    }
                    // to find the tabs we first need to locate something reliable - the 'New Tab' button 
                    AutomationElement root = AutomationElement.FromHandle(proc.MainWindowHandle);
                    Condition condNewTab = new PropertyCondition(AutomationElement.NameProperty, "New Tab");
                    AutomationElement elmNewTab = root.FindFirst(TreeScope.Descendants, condNewTab);
                    // get the tabstrip by getting the parent of the 'new tab' button 
                    TreeWalker treewalker = TreeWalker.ControlViewWalker;
                    AutomationElement elmTabStrip = treewalker.GetParent(elmNewTab); // <------------- Error here 
                    // loop through all the tabs and get the names which is the page title 
                    Condition condTabItem = new PropertyCondition(AutomationElement.ControlTypeProperty, ControlType.TabItem);
                    foreach (AutomationElement tabitem in elmTabStrip.FindAll(TreeScope.Children, condTabItem))
                    {
                        Console.WriteLine(tabitem.Current.Name);
                    }
                }
            }


            Console.Write("\nPress any key to continue...");
            Console.ReadKey();
        }
    }
}

Answer 3

<!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>

使用javascript进行注册表单验证

3 个答案: