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

【问题标题】：Change input validation type by HTML Selector通过 HTML 选择器更改输入验证类型
【发布时间】：2015-06-22 10:04:23
【问题描述】：

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

想要的效果：

选项 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>

JS - 到目前为止只检测选择和更改占位符文本：

$('#iam').on('change', function() {
var placeholder = $(this).find(':selected').data('placeholder');
    $('#subscriber-email').attr('placeholder', placeholder); 
});

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);

}
?>

【问题讨论】：

你想要达到的结果是什么？我的意思是在 js 中还是在 php 中？
您真正想要什么？这还不清楚。请说明？
我已经编辑了我的帖子以更清楚一点。 @anantkumarsingh
当第一个选项选择您的输入类型更改为文本字段时，您是否想要，其余两个将是电子邮件类型字段？不是吗？
请说出我问了什么？

标签： javascript php jquery html validation

【解决方案1】：

如果你想在 php 中验证它，你需要做的就是将选项值设置为你想要验证的类型而不是 x、y 并相应地处理它。如果您需要这些值（x 和 y），您可以将值设置为 x;email 和 y;email 之类的格式，在 php 中拆分它们并获取原始值加上验证器方法。

如果你想在 javascript 中这样做，它会变得有点棘手。这应该有助于您开始根据所选选项设置类型。正确的名称和 ID 由您决定。

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

【讨论】：

【解决方案2】：

凭借我对 JS 和 PHP 的一点点新手了解，我创建了 3 个输入字段 - 名称/用户名/电子邮件。对于类型 A，需要名称和用户名组合才能提交。对于类型 B 和 C，我需要一个名称和电子邮件组合来提交。因此，当从选项中选择类型 A 并提交可见字段时，我隐藏了电子邮件字段。 When either Type B or C is selected I hid the Username field and keep the Name and Email fields visible and submitted their contents.

【讨论】：