使用类验证javascript表单

wvmv3b1j  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(214)

我曾经在一个网站上使用过HTML5表单。我想，如果我使用HTML5，它会自动使表单有效。但是，它不能在所有浏览器上正确地显示所有字段。所以，我不得不使用javascript。由于我不是javascriptMaven，我不得不面对很多问题。
这是website
1）为了显示错误消息，我创建了一个div（div id ="validation"）。我通过document.getElementById从javascript中选择了div。但是，输入字段不是一个。有许多输入字段。所以，我必须将其用作类。问题就在那里，我根本无法为document.getElementsByClassName编写循环/代码。基本上，对我来说，使用class进行div #验证并使用相同id进行javascript选择是不明智的。因为，在许多数字中可能存在相同类型的表单，如page。如果有人单击Edit图标，将弹出一个表单。因此，我应该使用div. validation而不是div #validation。我还担心输入id。在上面的链接中，有相同字段的输入被保留。因此，如果我从javascipt中通过表单的id定位/选择输入，它可能在保留多个表单的情况下不起作用。因此，我不明白我该怎么做。最近，我一个接一个地测试了div #validation的定义，它起作用了。
(a)所以，请，写的代码至少有两个输入字段的目标类从javascript.所以，我可以把剩余的输入字段的javascript然后.

有一件事，我不使用"必需"在任何地方，因为我使用的javascript。但是，经过尝试和尝试时，没有工作，我已经把"必需"属性至少在输入字段在HTML中，javascript工作!没有必需的字段至少在一个输入字段，javascript是不工作的!我不明白为什么会发生这种情况。我不想使用"必需"了。
(b)此外，我想一个红色的背景时，该文件是无效的，像这样：

如何使用CSS或JavaScript实现这一点？
必要的HTML代码：

<div class="wrapper">
        <header class="page_title">
            <h1>Create New Job</h1>
        </header>
        <section class="form">
            <form id="form" name="form" method="post" action="#">
                <label>Job ID:</label>
                <input type="text" name="job_id" id="job_id" placeholder="1">
                <div id="validation"></div>
                <label>Start Date:</label>
                <input type="text" name="start_date" id="start_date" placeholder="mm/dd/yy">
                <div id="validation"></div>
                <label>Deadline:</label>
                <input type="text" name="deadline" id="deadline" placeholder="mm/dd/yy">
                <div id="validation"></div>
                <label>Finish Date:</label>
                <input type="text" name="finish_date" id="finish_date" placeholder="mm/dd/yy">
                <div id="validation"></div>
                <label>Budget($):</label>
                <input type="text" name="budget" id="budget" placeholder="100">
                <div id="validation"></div>
                <label>Client ID:</label>
                <input type="text" name="client_id" id="client_id" placeholder="1">
                <div id="validation"></div>
                <label>Client Phone Number:</label>
                <input type="text" name="phone" id="phone" placeholder="01712333333">
                <div id="validation"></div>
                <label>Client Email address:</label>
                <input type="text" name="email" id="email" placeholder="john.smith@gmail.com">
                <div id="validation"></div>
                <label>Bidder ID:</label>
                <input type="text" name="bidder_id" id="bidder_id" placeholder="1">
                <div id="validation"></div>
                <label>Number of Supervisor:</label>
                <select title="Supervisor" id="num_supervisor">
                        <option value="-1">Select</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                </select>
                <div id="validation"></div>
                <label>Odesk Profile Link:</label>
                <input type="text" name="odesk_link" id="odesk_link" placeholder="https://www.odesk.com/jobs/Frontend-engineer">
                <div id="validation"></div>
                <label>Owner Type:</label>
                <input type="radio" name="owner_type" id="owner_type" value="member" /><label class="text_label">Member</label>
                <input type="radio" name="owner_type" id="owner_type" value="employee" /><label class="text_label">Employee</label>
                <div id="validation"></div>
                <div class="clear"></div>
                <label>Message:</label> 
                <textarea id="message" name="message" rows="2" cols="20" placeholder="Your enquiry goes here"></textarea>
                <div id="validation"></div>
                <input type="submit" name="submit" id="submit" value="Submit" />
        </form>
     </section>
</div>

CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
a {
    text-decoration: none;
}

.clear { clear: both; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
    display: block;
}

h1 {
    font-size: 26px;    
}

body {
    background: #fff;
    font-family: sans-serif;
    color: #333;
    font-size: 12px;
    line-height: 1em;
}
.wrapper {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    background: #fff;
}
header.page_title {
    background: #E3E3E3;
    border-radius: 7px 7px 7px 7px;
    color: #333;
    padding: 20px;
    margin: 40px 0 0 0; 
}
.form {
    width: 800px;
    margin: 20px 0 0 2px;
    border: none;
    background: #fff;
}
form {
    border: none;
    background: #fff;   
}

.form label { 
    display: block; 
    text-align: left; 
    width: 200px; 
    float:left; 
    margin: 5px 0 0 20px;
    font-size: 15px; 
}
.form label.text_label {
    width: auto;
    display: inline;
    margin: 5px 20px 15px 10px; 
}
.form input, .form select {
    float:left; 
    font-size:13px;
    margin: 0 0 10px 0; 
    padding: 0;
}
.form input:required {

}
input:valid {
    border: 1px solid #909090;

}
input[type=text]:invalid, input[type=date]:invalid, input[type=number]:invalid, input[type=email]:invalid, input[type=tel]:invalid, input[type=url]:invalid, textarea:invalid {
    border: 1px solid #FF0000;

}

.form input[type=text], .form input[type=date], .form input[type=number], .form input[type=email], .form input[type=tel], .form input[type=url] { 
    width: 500px; 
    height: 27px;
    border: 1px solid #909090;
    border-radius: 3px; 
}
.form input[type=file] {
    width: 500px;   
}
.form select {
    width: 500px;
    height: 27px;
    line-height: 27px;
    padding: 3px 0 0 0;
    border: 1px solid #909090;
    border-radius: 3px; 
}
.form input[type="radio"] {
    margin: 5px 0 0 0;  
}
.form textarea { 
    float: left; 
    width: 500px; 
    height: 82px; 
    margin: 0 0 10px 0; 
    padding: 0; 
    font-size: 13px;
    border: 1px solid #909090; 
}
.form input[type="submit"] { 
    margin: 10px 0 20px 220px; 
    width: 100px; 
    height: 30px; 
    background: #FF6D1F; 
    text-align: center; 
    line-height: 30px; 
    color: #FFFFFF; 
    font-size: 13px; 
    font-weight: bold; 
    border: none;
    box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), 0 1px 0 #9FE662 inset; 
    border-radius: 5px;
    cursor: pointer;
}
.form input[type="submit"]:hover { 
    background: #FF822E;
}

input[type=text]:focus, textarea:focus, input[type=search]:focus, input[type=date]:focus, input[type=number]:focus, input[type=email]:focus, select:focus, input[type=tel]:focus, input[type=url]:focus {
    background: #fff;
    border-color: #595959;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
    box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
    outline: none;
}
#validation {
    background: #EAEAEA;
    width: 165px;
    height: 18px;
    /*opacity: .5;*/
    border: 1px solid #A69E7C;
    float: left;
    margin: -20px 0 0 -110px;
    padding: 7px 5px 10px 10px;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 0 2px #888;
    color: #000;
    line-height: 14px;
    position: relative;
    display: none;
}
input[type=radio] #validation {
    margin-left: -10px; 
}
.arrow {
    width: 14px;
    height: 15px;
    position: absolute;
    background: url(../images/arrow-down.png) no-repeat;
    bottom: -15px;
    left: 77px;
    z-index: 120;   
}

Javascript：

var submit = document.getElementById("submit");
submit.onclick = function() {
    var job_id = document.getElementById("job_id").value;
    var validation = document.getElementById("validation");
    var form = document.getElementById("form");

    if(job_id == "") {
        validation.style.display = 'block';
        validation.innerHTML = "ID cannot be left empty";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
            validation.style.display = 'none';  
    }   

    var start_date = document.getElementById("start_date").value;
    if(start_date == "") {
        validation.innerHTML = "Please, Enter the date";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
            validation.style.display = 'none';  
    }

    var deadline = document.getElementById("deadline").value;
    if(deadline == "") {
        validation.innerHTML = "Please, Enter the deadline";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
            validation.style.display = 'none';  
    }

    var finish_date = document.getElementById("finish_date").value;
    if(finish_date == "") {
        validation.innerHTML = "Please, Enter the finish date";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';
    }

    var budget = document.getElementById("budget").value;
    if(isNaN(budget)) {
        validation.innerHTML = "Enter Numeric Value here.";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);

    }else if(budget == "") {
        validation.innerHTML = "Please, Enter the Budget";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
     }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
     }

     var client_id = document.getElementById("client_id").value;
     if(client_id == "") {
        validation.style.display = 'block';
        validation.innerHTML = "ID cannot be left empty";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var phone = document.getElementById("phone").value;
    if(isNaN(phone)) {
        validation.innerHTML = "Enter Numeric Value here.";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);

    }else if(phone == "") {
        validation.innerHTML = "Please, Enter the Phone number";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
     }else if(phone.length < 7) {
            validation.innerHTML = "Phone Number should be at least 7 chars";
            arrow = document.createElement("div");
            arrow.className = 'arrow';
            validation.appendChild(arrow);
     }else if(phone.length > 11) {
            validation.innerHTML = "Phone Number should be at best 11 chars";
            arrow = document.createElement("div");
            arrow.className = 'arrow';
            validation.appendChild(arrow);
     }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
     }

    var email = document.getElementById("email").value;
    var atpos=email.indexOf("@");
    var dotpos=email.lastIndexOf(".");
     if(email == "") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, enter email address";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
        validation.innerHTML = "This is not a valid email address";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }
    else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var bidder_id = document.getElementById("bidder_id").value;
     if(bidder_id == "") {
        validation.style.display = 'block';
        validation.innerHTML = "ID cannot be left empty";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var num_supervisor = document.getElementById("num_supervisor").value;
     if(num_supervisor == "-1") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, select";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var odesk_link = document.getElementById("odesk_id").value;
    var tomatch= /^(ht|f)tps?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/;
    if(odesk_link == "") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, Enter the url";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    } else if (tomatch.test(odesk_link)) {
        validation.innerHTML = "";
        validation.style.display = 'none';
        return true;
     }else {
        validation.style.display = 'block';
        validation.innerHTML = "This is not valid url";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);

        return false;
    }

     var owner_type = document.getElementById("owner_type").value;
     if(owner_type == "") {
        validation.style.display = 'block';
        validation.style.marginLeft = '0';
        validation.innerHTML = "Please, write something";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

     var message = document.getElementById("message").value;
     if(message == "") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, write something";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

}

（c）javascript的单选按钮，url链接和文本区输入没有显示正确的错误信息.我认为，代码为这一节是好的，但什么问题，我不明白.

JavaScript

2条答案

按热度按时间
guykilcj

guykilcj1#

如果您可以使用jQuery作为js库，那么这里有一个适合您的解决方案[针对a）和b）]：http://jsfiddle.net/6fLNz/4/
一些评论：
1.永远不要使用一个ID超过一次。
1.对于javascript，你重复同样的代码很多次;在这种情况下，您可以创建一种带有事件处理程序"模板函数"，这样就不必在每次启动函数时都重新键入它。当然，您必须为不使用!==或===求值的条件构建特定的函数。
1.我看了一下您的项目，它似乎真的足够大，可以使用jQuery或其他JS库，这可能会简化和加快开发过程。
1.我把输入验证放在. focusout事件上，这样用户在点击/切换另一个输入后会立即得到错误通知。如果你更喜欢点击提交按钮时触发的函数，你可以把第22行input.on('focusout', function()改为$('#submit').on('click', function()。
jQuery函数供参考：

$(document).ready(function() {
// First define user inputs
var inputs = [];
inputs[0] = $('#job_id');        // Job Id input
inputs[1] = $('#start_date');    // Start date input
inputs[2] = $('#deadline');      // Deadline input
// Add other inputs here like so => inputs[3] = $('#<input id>');

// Define the errors (error indexes must be the same as their inputs' indexes, eg errors[0] for inputs[0])
var errors = [];
errors[0]     = 'ID cannot be left empty';      // Job Id error
errors[1]     = 'Please enter the date';        // start date error
errors[2]     = 'Please enter the deadline';    // deadline error
// Add other errors here like so => errors[3] = $('#<input id>');

// These are the different validation patterns
var expressions = [];
expressions[0] = '';
expressions[1] = /regex/ ;

// Template function with event handlers
var showFormValidation = function showFormValidation(input, error, expression) {
    input.on('focusout', function() {
        if(input.val() == expression) {
            $(this).next('.validation').show();
            $(this).next('.validation').html(error);
            $(this).css({'box-shadow': '0 0 3px red',
                         '-moz-boxshadow': '0 0 3px red',
                        '-webkit-boxshadow': '0 0 3px red',
                         '-o-boxshadow': '0 0 3px red',
                         'border': '1px solid red'
                        });
        } else if(input.val() != expression) {
            $(this).next('.validation').hide();
            $(this).css({'box-shadow': 'none',
                         '-moz-boxshadow': 'none',
                        '-webkit-boxshadow': 'none',
                         '-o-boxshadow': 'none',
                         'border': '1px solid grey'
                        });
        }
    });
};
// This function will show the form validation for all input, if the input is == ''
for(i=0; i < errors.length; i++) { 
    showFormValidation( inputs[i], errors[i], expressions[0]);
}

}）;

赞(0）分享  回复(0）举报  2023-01-01
ercv8c1e

ercv8c1e2#

我贴出了一个新的答案，因为这个答案更具体和复杂。但是，请阅读粗体注解：

    • 我在这里写的代码几乎可以被定义为jQuery错误验证插件。最终，为了开发一个需要高级错误显示功能和其他功能的多功能应用程序，你应该真正学习一个javascript框架（如Ext.js，jQuery，jQuery UI [框架的框架!]，YUI等）或至少在高级程度上掌握javascript。**

新函数的作用：
1.检查输入是否为空[显示错误（& D）]
1.如果输入不是1.，检查输入是否短于给定长度[& display error]
1.如果输入不是2.，检查输入是否长于给定长度[&显示错误]
1.如果input不是3.，请检查input是否具有指定的字符串[& display error]
1.如果输入不是4.，请检查输入是否具有指定的正则表达式模式[& display error]
1.如果输入通过所有测试，则隐藏错误。
这是有代价的对于每次函数启动，您必须指定10个参数，如下所示：第一个月

  • input是要将值与之进行比较的输入ID
  • minLength和maxLength应为2个整数（或空值）
  • regex应该是//-封闭的regex模式，find应该是字符串（例如"mail"）
  • 前缀为"error"的所有参数都是在前面的参数为真时显示的错误消息（例如，如果输入短于minLength，则将显示errorminLength）
  • 如果不想针对某些值进行测试，请将参数设置为null

例如，看看这篇文章中嵌入式代码的最后3行。
下面是新的jQuery代码（它应用于小提琴的前3个输入：http://jsfiddle.net/6fLNz/5/

$(document).ready(function() {
    // First define user inputs
    var inputs = [];
    inputs[0] = $('#job_id');        // Job Id input
    inputs[1] = $('#start_date');    // Start date input
    inputs[2] = $('#deadline');      // Deadline input
    // Add other inputs here like so => inputs[3] = $('#<input id>');

    // Define the errors (error indexes must be the same as their inputs' indexes, eg errors[0][0][0] for inputs[0])
    var errors = [];
    errors[0] = [];
    errors[1] = [];
    errors[2] = [];
    var blank = 0;
    var length = 1;
    var indexof = 2;
    // errors when input = empty
    errors[blank][0]     = 'ID cannot be left empty';      // Job Id error
    errors[blank][1]     = 'Please enter the date';        // start date error
    errors[blank][2]     = 'Please enter the deadline';    // deadline error
    errors[blank][3]     = 'You haven\'nt chosen an ownertype'; // ownertype radiobutton error
    // errors when not enough chars or too many chars
    errors[length][0]    = 'Your message must be at least x characters in length.';
    errors[length][1]    = 'Your message must be at most x characters in length.';
    // errors when input doesn't contain a certain string
    errors[indexof][0]   = 'Your message doesn\'t contain the necessary characters';

    // Template function with event handlers
    var showFormValidation = function showFormValidation(input, errorBlank, minLength, errorminLength, maxLength, errormaxLength, find, errorFind, regex, errorRegex) {

        input.on('focusout', function() {
            var errorVisible = function errorVisible(error) {
                if(error !== null) {
                input.next('.validation').show();
                input.next('.validation').html(error);
                input.css({'box-shadow': '0 0 3px red',
                            '-moz-boxshadow': '0 0 3px red',
                            '-webkit-boxshadow': '0 0 3px red',
                            '-o-boxshadow': '0 0 3px red',
                            'border': '1px solid red'
                            });
                }
            };
            var errorHidden = function errorHidden() {
            input.next('.validation').hide();
                    input.css({'box-shadow': 'none',
                                 '-moz-boxshadow': 'none',
                                '-webkit-boxshadow': 'none',
                                 '-o-boxshadow': 'none',
                                 'border': '1px solid grey'
                                });
            };
            if(input.val() == '') {                                                     // shows error if input is empty
                errorVisible(errorBlank);
            } else if(input.val() != '') {
                errorHidden();
                if(input.val().length < minLength && minLength != null) {               // shows error if input is shorter than 'minLength' characters
                    errorVisible(errorminLength);
                } else if(input.val().length >= minLength || minLength == null) {
                    errorHidden();
                    if(input.val().length > maxLength && maxLength != null) {           // shows error if input is longer than 'maxLength' characters
                        errorVisible(errormaxLength);
                    } else if (input.val().length <= maxLength || maxLength == null) {
                        errorHidden();
                        if(input.val().indexOf(find) == -1 && find != null) {           // shows error if string 'find' is not found in the input.val()
                            errorVisible(errorFind);
                        } else if(input.val().indexOf(find) != -1 || find == null) {
                            errorHidden();
                            if(!input.val().match(regex) && regex != null) {            // shows error if string doesn't follow a certain regex pattern
                                errorVisible(errorRegex);
                            } else if(input.val().match(regex) || regex == null) {
                                errorHidden();
                            }
                        };
                    };
                };
            };
        });
    };

    showFormValidation(inputs[0], errors[blank][0], 4, errors[length][0], null, null, 'mailto', errors[indexof][0], null, null );
    showFormValidation(inputs[1], errors[blank][1], 6, errors[length][0], 6, errors[length][1], null, null, null, null );
    showFormValidation(inputs[2], errors[blank][2], null, null, null, null, null, null, /\//i, 'wrong regex');
});

我选择了将错误消息集中放在数组中，但是您也可以直接输入字符串作为函数参数。
干杯。

赞(0）分享  回复(0）举报  2023-01-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com