使用javascript进行html表单验证_Javascript_Html_Css

使用javascript进行html表单验证

javascript html css

使用javascript进行html表单验证,javascript,html,css,Javascript,Html,Css,我正在使用javascript进行简单的表单验证，但它似乎有一个小问题，我试图抓住，但我无法做到这一点。这里是代码，问题是选择列表没有得到验证，我不知道为什么 <html> <head> <title>Mobile Phone Prices In Pakistan </title> <style> .error{ color:red; } </style> </head> <body> &l

我正在使用javascript进行简单的表单验证，但它似乎有一个小问题，我试图抓住，但我无法做到这一点。这里是代码，问题是选择列表没有得到验证，我不知道为什么

<html>
<head>
<title>Mobile Phone Prices In Pakistan </title>
<style>
.error{
color:red;

}
</style>


</head>
<body>


<form id="theform" name"form1">
<p>Name:
<input type="text" name="username" id="username" />
<span id="nameerror"></span>
</p>
 <p>
 Email:
 <input type="text" name="email" id="email" />
 <span id="emailerror"></span>
</p>
<p>
Country:
<select name="country" id="country">
<option value="0">choose your country </option>
<option value="pk">pakistan</option>
<option value="ind">India</option>
<option value="afg">afghanistan</option>
<option value="irn">Iran</option>
</select>
<span id="countryerror"></span>
</p>
<p>
Gender
</p>
<p>Male
<input type="radio" name="gender" id="radio" value="radio">
<span id="gendererror"></span>
Femal
<input type="radio" name="gender" id="radio2" value="radio2">
</p>
<p>
<input type="checkbox" name="rules" id="rules">
Accept our rules and regulation to continue with form process 
</p>
<p>
<input type="submit" name="button" id="submit" value="register" >
</p>
</form>



<script type="text/javascript">

document.getElementById("theform").onsubmit = validate;
document.getElementById("submit").disabled = true;
var rules = document.getElementById("rules");
rules.onclick = function (){
    if(rules.checked){
        document.getElementById("submit").disabled = false;

    }else{

        document.getElementById("submit").disabled = true;
    }

}

function validate(){

var username = document.getElementById("username"); 
var email = document.getElementById("email");
var country = document.getElementById("country");       
var radio1 = document.getElementById("radio");  
var radio2 = document.getElementById("radio2"); 
var atpos = email.value.indexOf("@");
var dotpos = email.value.lastIndexOf(".");




if(username.value == "" && username.value.length == 0){

    document.getElementById("nameerror").innerHTML = "please enter your name";
    username.focus();
    document.getElementById("nameerror").className = "error";
    return false;

}else{
    document.getElementById("nameerror").innerHTML = "";
    document.getElementById("nameerror").className= "";
}
if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.vlaue.length){

    document.getElementById("emailerror").innerHTML = "please enter your email";
    email.focus();
    document.getElementById("emailerror").className = "error";
    return false;

}else{
    document.getElementById("emailerror").innerHTML = "";
    document.getElementById("emailerror").className= "";
}
if(country.selectedIndex == 0){
    document.getElementById("countryerror").innerHTML = "please choose country";
    document.getElementById("countryerror").className = "error";
    return false;

}else{
    document.getElementById("countryerror").innerHTML = "";
    document.getElementById("countryerror").className = "";

}

if(radio1.checked == false && radio2.checked == false){

    alert("please choose your gender");
    return false;   
}



}


</script>


</body>
</html>


巴基斯坦手机价格
.错误{
颜色：红色；
}
姓名：


电邮：


国家：
选择你的国家
巴基斯坦
印度
阿富汗
伊朗


性别

男性
女性的


接受我们的规则和规定，继续进行表格处理



document.getElementById（“theform”）.onsubmit=validate；
document.getElementById（“提交”）.disabled=true；
var rules=document.getElementById（“规则”）；
rules.onclick=函数（）{
如果（规则已选中）{
document.getElementById（“提交”）.disabled=false；
}否则{
document.getElementById（“提交”）.disabled=true；
}
}
函数验证（）{
var username=document.getElementById（“用户名”）；
var email=document.getElementById（“电子邮件”）；
var country=document.getElementById（“国家”）；
var radio1=document.getElementById（“radio”）；
var radio2=document.getElementById（“radio2”）；
var atpos=email.value.indexOf（“@”）；
var dotpos=email.value.lastIndexOf（“.”）；
如果（username.value==“”&&username.value.length==0）{
document.getElementById（“nameerror”）.innerHTML=“请输入您的姓名”；
username.focus（）；
document.getElementById（“nameerror”）.className=“error”；
返回false；
}否则{
document.getElementById（“nameerror”）.innerHTML=“”；
document.getElementById（“nameerror”）.className=“”；
}
如果（atpos<1 | | dotpos=email.vlaue.length）{
document.getElementById（“emailerror”）.innerHTML=“请输入您的电子邮件”；
email.focus（）；
document.getElementById（“emailerror”）.className=“error”；
返回false；
}否则{
document.getElementById（“emailerror”）.innerHTML=“”；
document.getElementById（“emailerror”）.className=“”；
}
如果（country.selectedIndex==0）{
document.getElementById（“countryerror”）.innerHTML=“请选择国家”；
document.getElementById（“countryerror”）.className=“error”；
返回false；
}否则{
document.getElementById（“countryerror”）.innerHTML=“”；
document.getElementById（“countryerror”）.className=“”；
}
if（radio1.checked==false&&radio2.checked==false）{
提醒（“请选择您的性别”）；
返回false；
}
}

您的if语句中有拼写错误

if（atpos<1 | | dotpos=email.vlaue.length）{

将email.vlaue.length替换为此处键入错误的email.value.length

if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.**vlaue**.length){

if（atpos<1 | | dotpos=电子邮件。**vlaue**.length）{

原因是，您在

电子邮件

部分拼错了

值

工作区：

您的代码：

if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.vlaue.length){

    document.getElementById("emailerror").innerHTML = "please enter your email";
    email.focus();
    document.getElementById("emailerror").className = "error";
    return false;

}else{

if（atpos<1 | | dotpos=email.vlaue.length）{
document.getElementById（“emailerror”）.innerHTML=“请输入您的电子邮件”；
email.focus（）；
document.getElementById（“emailerror”）.className=“error”；
返回false；
}否则{

工作代码：

if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.value.length){

    document.getElementById("emailerror").innerHTML = "please enter your email";
    email.focus();
    document.getElementById("emailerror").className = "error";
    return false;

}else{

if（atpos<1 | | dotpos=email.value.length）{
document.getElementById（“emailerror”）.innerHTML=“请输入您的电子邮件”；
email.focus（）；
document.getElementById（“emailerror”）.className=“error”；
返回false；
}否则{

此处键入

email.value.length

if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.value.length){
                                                      ^^^^^^

}

if（atpos<1 | | dotpos=email.value.length）{
^^^^^^
}

您实际上要查找的是select是否有值

这是您的代码的修订版

<p>Please Select a Security Question from the Drop Down List.<br />
    <select name = "Security Question" id="securityQuestion">
        <option></option>
        <option value="m">What is your Mother's maiden name?</option>
        <option value="p">What is the name of your pet?</option>
        <option value="c">What is your favorite color?</option>
    </select>
    <input type="button" value="Click to Check" onClick="checkDropdown(1)" />
</p>

<script>
    function checkDropdown () {
    var securityQuestionElement = document.getElementById('securityQuestion');
    if(!securityQuestionElement.value) {  
        window.alert('You must select a Security Question');  
        securityQuestionElement.value = 'm'
        return false;  
    }
}
</script>

你能用JSFIDLE输入这个吗？你可以用

value

而不是

selectedIndex

ok这是你代码中的JSFIDLE输入错误。

email.vlaue.length

upvote需要15个声誉。对不起，伙计，如果可以的话，我当然会再次感谢你

I am checking the select's value, not the option's "checked" status
I am selectingbyId, the browser indexes Ids early on (not sure about by name)
I am checking for the absence of a value, not if the value equals one of 3 cases. (cleaner/easier to read)