使用javascript验证注册表_Javascript_Jquery_Html_Validation

使用javascript验证注册表

javascript jquery html validation

使用javascript验证注册表,javascript,jquery,html,validation,Javascript,Jquery,Html,Validation,我有一部分在那里，但如果你们中的任何人都能发送完整的代码，这将是很有帮助的 1）使用以下给定字段创建一个表单，并使用javascript或jquery对其进行验证名称：文本框-必填性别：单选按钮年龄：文本框-仅接受数字-（检查有效的年龄标准）电子邮件：文本框-格式应为example@gmail.com 网站：文本框-格式应为国家/地区：选择包含10个国家/地区的框手机：文本框-应为10位数字-仅在用户选择国家/地区后显示此字段社交媒体账户：Facebook、Google、Twi

我有一部分在那里，但如果你们中的任何人都能发送完整的代码，这将是很有帮助的

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

名称：文本框-必填
性别：单选按钮
年龄：文本框-仅接受数字-（检查有效的年龄标准）
电子邮件：文本框-格式应为example@gmail.com
网站：文本框-格式应为
国家/地区：选择包含10个国家/地区的框
手机：文本框-应为10位数字-仅在用户选择国家/地区后显示此字段
社交媒体账户：Facebook、Google、Twitter（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>

使用jQuery获取表单元素的值
$（文档）.ready（函数（）{
$（“#社交”）.hide（）；
//$（“#隐藏”）。单击（函数（）{
//$（“社交”）.hide（）；
// });
//var country=document.getElementByName（“国家”）[0]。值；
//如果（country.value==“印度”）{
//$（“#显示”）。单击（函数（）{
//$（“社交”）.show（）；
// });
// }
如果（！（/^\w+（[\.-]？\w+*@\w+（[\.-]？\w+*（\.-]）+$/）.test（document.email\u id.value））{
警报（“您输入的电子邮件地址无效！”）
返回（假）
}
});
使用jQuery获取表单元素的值




姓名：






性别：
男性
女性



电邮：





年龄：
*输入数字（0-9）



网站：
函数验证（）{
if（Website.value.length==0）
{
document.getElementById（“网站”）.innerHTML=“应采用以下格式http://www.example.com ";
}
}



国家：
挑选
美国
印度
大不列颠联合王国
阿拉伯联合酋长国
德国
法国
荷兰
也门
巴基斯坦
俄罗斯



流动电话：
函数phoneno（）{
$（“#电话”）。按键（功能（e）{
var a=[]；
var k=e，其中；
对于（i=48；i<58；i++）
a、 推（i）；
如果（！（a.indexOf（k）>=0））
e、 预防默认值（）；
});
}



社交媒体账户。
Facebook
CSS
Twitter





函数disableSubmit（）{
document.getElementById（“提交”）.disabled=true；
}
功能激活按钮（元素）{
如果（元素已选中）{
document.getElementById（“提交”）.disabled=false；
}
否则{
document.getElementById（“提交”）.disabled=true；
}
}
我同意条款和条件

这是我的js页面内容表单_value.js
$（文档）.ready（函数（）{
//函数获取输入值。
$（“#文本_值”）。单击（函数（）{
var text_value=$（“#text”）.val（）；
如果（文本值=“”）{
警报（“在输入字段中输入一些文本”）；
}否则{
警报（文本值）；
}
});
//检查收音机值的功能。
$（“#性别_值”）。单击（函数（）{
$（“#结果”）.empty（）；
var值=$（“表单输入[type='gender']：选中”）.val（）；
如果（$（“表单输入[type='gender']”）是（':checked'））{
$（'#result'）.append（“选中的单选按钮值为：“+Value+”）；
}否则{
警告（“请选择任何选项”）；
}
});
//获取更改收音机功能的值。
$（'input:gender'）.change（function（）{
var值=$（“表单输入[type='gender']：选中”）.val（）；
警报（“更改的无线电值为：”+值）；
});
//重置或清除选择的功能。
$（“#无线电重置”）。单击（函数（）{
$（“#结果”）.empty（）；
$（“输入：收音机”）.attr（“选中”，假）；
});
$（“#电子邮件”）。单击（函数（）{
功能验证（电子邮件）{
变量reg=/^（[A-Za-z0-9\-\.]）+\@（[A-Za-z0-9\-\.]）+\.（[A-Za-z]{2,4}）$/；
//var address=document.getElementById[email].value；
如果（注册测试（电子邮件）=错误）
{
警报（'的格式应为example@gmail.com');
返回（假）；
}
}
});
});
$（“#年龄”）。单击（函数（）{
var specialKeys=新数组（）；
specialKeys.push（8）；//退格
函数为数字（e）{
var-keyCode=e.which？e.which:e.keyCode
var ret=（（键码>=48&&keyCode 100）input.value=100；
}
});

函数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（年龄）；
var email=document.forms[“myForm”][“email”].value；
var url=document.forms[“myForm”][“website”].value；
var country=document.forms[“myForm”][“country”].value；
var mobilecocountry=document.forms[“myForm”][“mobilecocountry”].value；
var mcLength=mobileCountry.length；
如果（名称==“”）{
警报（“名称字段为必填项”）；
返回false；
}
if（性别！=“男性”和性别！=“女性”）{
警告（“必须至少选择一种性别”）；
返回false；
}
if（isNaN（a））{
警告（“年龄是强制性的，必须是数字”）；
     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>

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