Javascript 通过HTML选择器更改输入验证类型_Javascript_Php_Jquery_Html_Validation

Javascript 通过HTML选择器更改输入验证类型

javascript php jquery html validation

Javascript 通过HTML选择器更改输入验证类型,javascript,php,jquery,html,validation,Javascript,Php,Jquery,Html,Validation,我很好奇，我如何才能找到一种方法来检测用户从表单选项中选择了什么。根据他们的选择，将更改输入字段文本的处理方式理想效果：选项A：接受文本，因此会立即对其进行处理选项B：在继续表单处理之前接受要验证的电子邮件选项C：接受电子邮件，以便在继续表单处理之前验证其电子邮件最后，所有三个选项都会附加到文本文件中。到目前为止，我只能让它验证电子邮件提前谢谢 HTML格式： <form method="post" class="subscription-form

我很好奇，我如何才能找到一种方法来检测用户从表单选项中选择了什么。根据他们的选择，将更改输入字段文本的处理方式

理想效果：

选项A：接受文本，因此会立即对其进行处理

选项B：在继续表单处理之前接受要验证的电子邮件

选项C：接受电子邮件，以便在继续表单处理之前验证其电子邮件

最后，所有三个选项都会附加到文本文件中。到目前为止，我只能让它验证电子邮件

提前谢谢

HTML格式：

<form method="post" class="subscription-form form-inline" id="subscribe" role="form">
                    
 <h4 class="subscription-success"><i class="icon_check"></i> Thank you for requesting... </h4>
 <h4 class="subscription-error">Something Wrong!</h4>
                    
 <select id="iam" name="usertype" class="form-control input-box">
 <option data-placeholder = "Enter A username" selected value="A">Enter  A account username</option>
 <option data-placeholder = "enter B email" value="B"> Enter B email </option>
 <option data-placeholder = "enter C email" value="C"> Enter C email </option>
 </select>

 <input type="email" name="email" id="subscriber-email" placeholder="Your Email" class="form-control input-box">
                    
 <button type="submit" name="submit" id="subscribe-button" class="btn btn-default standard-button">Submit</button>
                    
</form>

PHP-到目前为止，仅验证电子邮件并将结果附加到文件：

<?php
 // Note: filter_var() requires PHP >= 5.2.0
 if ( isset($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
  
$selected_val = $_POST['usertype'];  // Storing Selected Value In Variable

$e_mail = $_POST['email'] . " - is a - " . $selected_val . " ," . "\n";
file_put_contents('email-list.txt', $e_mail, FILE_APPEND | LOCK_EX);

}
?>

如果要在php中验证，只需将选项值设置为要验证的类型，而不是x、y，并相应地进行处理。如果需要这些值（x和y），可以将这些值设置为类似于x的格式；电子邮件和电子邮件；电子邮件，在php中拆分这些内容，并获得原始值加上验证器方法

如果您希望在javascript中这样做，它会变得有点棘手。这将有助于您开始根据所选选项设置类型。正确的姓名和身份证由您填写

<html>
    <head>
        <Script>
            function createInputField(e){
                var tS = (e || document.getElementById('inputFieldSelector')); //The type list
                var tC = document.getElementById('inputFieldContainer'); //The field container we append our input to

                if (tS && tC){
                    while (tC.firstChild) tC.removeChild(tC.firstChild); //Empty the container

                    var tO = tS.options[tS.selectedIndex]; //Selected option
                    var tE = document.createElement('input'); //The dynamic input field
                    tE.id = 'inputField';
                    tE.type = (tO.getAttribute('data-type') || 'text');
                    tE.placeholder = tO.getAttribute('data-placeholder');
                    tC.appendChild(tE);
                }
            }

            function validateInputField(){
                var tE = document.getElementById('inputField');
                if (tE){
                    if (tE.type == 'number' && (tE.value.trim() === '' || isNaN(tE.value))){
                        alert('This is no number..');
                        return false;
                    }
                    else if (tE.type == 'email' && tE.value.indexOf('@') === -1){
                        alert('What email is that?');
                        return false;
                    }
                }

                return true
            }
        </Script>
    </head>

    <body onload = 'createInputField()'>
        <form onsubmit = 'return validateInputField()'>
            <select id = 'inputFieldSelector' onchange = 'createInputField(this)'>
                <option data-placeholder = 'Enter Text' data-type = 'text' value = 'Influencer'>Today I want text</option>
                <option data-placeholder = 'Enter EMail' data-type = 'email' value = 'B'>I feel like entering an email</option>
                <option data-placeholder = 'Enter Number' data-type = 'number' value = 'C'>How about a number?</option>
            </select>

            <div id = 'inputFieldContainer'>
                <!--In here we are going to create the input field according to the selection.-->
            </div>

            <button type = 'submit'>Submit</button>
        </form>
    </body>
</html>


函数createInputField（e）{
var tS=（e | | document.getElementById（'inputFieldSelector'）；//类型列表
var tC=document.getElementById（'inputFieldContainer'）；//我们将输入附加到的字段容器
如果（tS&tC）{
while（tC.firstChild）tC.removeChild（tC.firstChild）；//清空容器
var tO=tS.options[tS.selectedIndex]；//所选选项
var tE=document.createElement（'input'）；//动态输入字段
tE.id='inputField'；
tE.type=（tO.getAttribute（'data-type'）| |'text'）；
tE.placeholder=tO.getAttribute（'data-placeholder'）；
附肢儿童（tE）；
}
}
函数validateInputField（）{
var tE=document.getElementById（'inputField'）；
如果（tE）{
如果（tE.type='number'&&（tE.value.trim（）==''|| isNaN（tE.value）））{
警报（“这不是号码…”）；
返回false；
}
else if（tE.type='email'&&tE.value.indexOf（'@'）=-1）{
警报（“那是什么电子邮件？”）；
返回false；
}
}
返回真值
}
今天我要发短信
我想输入一封电子邮件
一个号码怎么样？
提交

新手对JS和PHP的了解很少，我创建了3个输入字段——名称/用户名/电子邮件。对于类型A，提交时需要名称和用户名的组合。对于B&C类型，我需要一个名称和电子邮件组合才能提交。因此，当从选项和提交的可见字段中选择类型A时，我会隐藏电子邮件字段。当选择类型B或C时，我隐藏用户名字段，并保持名称和电子邮件字段可见，并提交其内容。

您希望获得什么结果？我是说js还是php？你到底想要什么？这还不清楚。请具体说明？为了更清楚一点，我编辑了我的文章@Anantkumarsingh当第一个选项是“选择输入类型”时，您希望更改为文本字段，其余两个选项将更改为电子邮件类型字段吗？是吗？请告诉我我问了什么？

<html>
    <head>
        <Script>
            function createInputField(e){
                var tS = (e || document.getElementById('inputFieldSelector')); //The type list
                var tC = document.getElementById('inputFieldContainer'); //The field container we append our input to

                if (tS && tC){
                    while (tC.firstChild) tC.removeChild(tC.firstChild); //Empty the container

                    var tO = tS.options[tS.selectedIndex]; //Selected option
                    var tE = document.createElement('input'); //The dynamic input field
                    tE.id = 'inputField';
                    tE.type = (tO.getAttribute('data-type') || 'text');
                    tE.placeholder = tO.getAttribute('data-placeholder');
                    tC.appendChild(tE);
                }
            }

            function validateInputField(){
                var tE = document.getElementById('inputField');
                if (tE){
                    if (tE.type == 'number' && (tE.value.trim() === '' || isNaN(tE.value))){
                        alert('This is no number..');
                        return false;
                    }
                    else if (tE.type == 'email' && tE.value.indexOf('@') === -1){
                        alert('What email is that?');
                        return false;
                    }
                }

                return true
            }
        </Script>
    </head>

    <body onload = 'createInputField()'>
        <form onsubmit = 'return validateInputField()'>
            <select id = 'inputFieldSelector' onchange = 'createInputField(this)'>
                <option data-placeholder = 'Enter Text' data-type = 'text' value = 'Influencer'>Today I want text</option>
                <option data-placeholder = 'Enter EMail' data-type = 'email' value = 'B'>I feel like entering an email</option>
                <option data-placeholder = 'Enter Number' data-type = 'number' value = 'C'>How about a number?</option>
            </select>

            <div id = 'inputFieldContainer'>
                <!--In here we are going to create the input field according to the selection.-->
            </div>

            <button type = 'submit'>Submit</button>
        </form>
    </body>
</html>