javascript 带有类的javascript表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16471589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript form validation with class
提问by user1896653
I've used the HTML5 form for a website. I thought, if I use HTML5, it automatically valid the form. But, it won't properly for all the field at all the browser. So, I had to use javascript. As I ain't expert at javascript, I've to face lots of problems.
我已经将 HTML5 表单用于网站。我想，如果我使用 HTML5，它会自动使表单生效。但是，它不适用于所有浏览器的所有字段。所以，我不得不使用javascript。因为我不是 javascript 专家，所以我必须面对很多问题。
Here is the website
这是网站
1)To show the error message, I create a div(div id="validation") beside the input field. I selected the div from javascript by document.getElementById. But, the input filed is not at one. There are many input field. So, I've to use that as class. Problem is there, I can't write the loop/code for document.getElementsByClassName at all.Basically, it's not wise for me to use class for that div#validation and use identical id for selecting by the javascript. Because, there can be same type of form in many number like this page. If anyone click the edit icon, there will be a popup form. So, I should use the div.validation not div#validation. I'm also afraid about the input id. At above link, there are same fielded input are stayed. So, if I target/select the input by id of the form from javascipt, it may not work where multiple form will be stayed. So, I can't understand what should I do. Recently, I've test one by one defining the div#validation and it worked.
1）为了显示错误消息，我在输入字段旁边创建了一个 div(div id="validation") 。我通过 document.getElementById 从 javascript 中选择了 div。但是，输入字段不是一个。有很多输入字段。所以，我必须把它当作课堂使用。问题是，我根本无法为 document.getElementsByClassName 编写循环/代码。基本上，为该 div#validation 使用类并使用相同的 id 由 javascript 进行选择对我来说是不明智的。因为，像这个页面一样可以有许多相同类型的表单.如果有人单击编辑图标，则会出现一个弹出表单。所以，我应该使用 div.validation 而不是 div#validation。我也害怕输入 id。在上面的链接中，保留了相同的字段输入。因此，如果我从 javascipt 中通过表单的 id 定位/选择输入，则可能无法在将保留多个表单的情况下工作。所以，我不明白我该怎么办。最近，我对定义的 div#validation 进行了一项一项测试，并且奏效了。
(a) So, Please, write the code at least for two input filed targeting the class from javascript. So, I can put the javascript of remaining input field then.
Screenshot of When I tested:
(a) 所以，请至少为两个针对 javascript 类的输入字段编写代码。所以，我可以把剩余输入字段的javascript然后。我测试时的屏幕截图：
One thing that, I don't use "required" at anywhere as I'm using javascript. But, after trying and trying when, nothing is working, I've put "required" attribute at aleast at input field at HTML, javascript works! And without required filed at least at one input filed, javascript is not work! I don't understand why this happened. I don't want to use "required" any more.
有一件事，我在使用 javascript 时不会在任何地方使用“必需”。但是，在尝试和尝试之后，没有任何效果时，我至少在 HTML 的输入字段中放置了“必需”属性，javascript 可以工作！如果没有至少在一个输入文件中提交的要求，javascript 是行不通的！我不明白为什么会这样。我不想再使用“必需”了。
(b) Also I want a red background when the filed is invalid like this:
How can I do this with CSS or javascript?
(b) 当文件无效时，我也想要红色背景，如下所示：
How can I do this with CSS or javascript？
Necessary HTML code:
必要的 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="[email protected]">
<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:
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:
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)The javascript for radio button, url link and textarea input didn't show the correct error message. I think, code for that section is okay, but what's the problem, I don't understand.
(c) 单选按钮、url 链接和 textarea 输入的 javascript 没有显示正确的错误消息。我认为，该部分的代码还可以，但是有什么问题，我不明白。
回答by Tyblitz
If you are okay with using jQuery as a js library, then here is a solution for you [for a) and b)]: http://jsfiddle.net/6fLNz/4/
如果您可以使用 jQuery 作为 js 库，那么这里有一个解决方案 [for a) 和 b)]：http: //jsfiddle.net/6fLNz/4/
Some comments:
一些评论：
- Never ever ever use one ID more than once.
- For javascript, you repeated the same code an awful lot of times; in that case you can make a kind of 'template function' with event handlers, so you don't have to retype the function everytime you want to launch it. Of course you will have to build specific functions for conditionals that don't evaluate with a
!==or===. - I had a look at your project, and it really seems big enough to use jQuery or another JS library that might ease and speed up the development process.
- I put the input verification on .focusout event, so the user is immediatly notified of the error after he clicks/ shifts on another input. You can change line 22
input.on('focusout', function()to$('#submit').on('click', function()if you rather have the functions firing on click of the submit button.
- 永远不要多次使用一个 ID。
- 对于 javascript，你重复了很多次相同的代码；在这种情况下，您可以使用事件处理程序创建一种“模板函数”，这样您就不必每次要启动它时都重新键入该函数。当然，您必须为不使用 a
!==或求值的条件构建特定函数===。 - 我查看了您的项目，它看起来确实足够大，可以使用 jQuery 或其他可以简化和加快开发过程的 JS 库。
- 我将输入验证放在 .focusout 事件上，因此用户在单击/切换另一个输入后会立即收到错误通知。如果您希望在单击提交按钮时触发函数
input.on('focusout', function()，$('#submit').on('click', function()则可以将第 22 行更改 为。
jQuery function for reference:
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]);
}
});
});
回答by Tyblitz
I'm posting a new answer as this one is much more specific and sophisticated. However please read the bold note:
我正在发布一个新答案，因为这个答案更加具体和复杂。但是，请阅读粗体注释：
The code I have written here could almost be defined as a jQuery error validation plugin. Ultimately, for developing a polyvalent application which needs advanced errordisplay functions & others, you should really learn a javascript framework (like Ext.js, jQuery, jQuery UI[ a framework of a framework!], YUI, etc...) or master javascript to an at least advanced extent.
我在这里编写的代码几乎可以定义为 jQuery 错误验证插件。最终，为了开发需要高级错误显示功能等的多价应用程序，您应该真正学习一个 javascript 框架（如 Ext.js、jQuery、jQuery UI[框架的框架！]、YUI 等...）或掌握javascript 至少达到了高级程度。
What the new function does:
新功能的作用：
- Check if input is empty [& display error]
- If input is not 1., check if input is shorter than given length [& display error]
- If input is not 2., check if input is longer than given length [& display error]
- If input is not 3., check if input has the specified string [& display error]
- If input is not 4., check if input has the specified regex pattern [& display error]
- If input passes all tests, error is hidden.
- 检查输入是否为空[&显示错误]
- 如果输入不是 1.，检查输入是否短于给定的长度 [& 显示错误]
- 如果输入不是 2.，检查输入是否超过给定的长度 [& 显示错误]
- 如果输入不是3.，检查输入是否有指定的字符串[&显示错误]
- 如果输入不是 4.，检查输入是否具有指定的正则表达式模式 [& 显示错误]
- 如果输入通过所有测试，则隐藏错误。
Now this comes at a cost:
For each function launch, you will have to specify 10 parameters, like this:
function showFormValidation(input, errorBlank, minLength, errorminLength, maxLength, errormaxLength, find, errorFind, regex, errorRegex)
现在这是有代价的：对于每个函数启动，您必须指定 10 个参数，如下所示：
function showFormValidation(input, errorBlank, minLength, errorminLength, maxLength, errormaxLength, find, errorFind, regex, errorRegex)
- input is the input id from which to compare the value to
- minLength and maxLength should be 2 integers (or null)
- regex should be a
//-enclosed regex pattern and find should be a string (eg. 'mail') - All parameters prefixed by 'error' are the errormessages to show when the preceding parameter is true (eg errorminLength will display if input is shorter than minLength)
- If you don't want to test against certain values, set the parameters to null
- input 是与值进行比较的输入 ID
- minLength 和 maxLength 应该是 2 个整数（或 null）
- regex 应该是一个
//-enclosed regex 模式并且 find 应该是一个字符串（例如“邮件”） - 所有以 'error' 为前缀的参数是当前面的参数为真时显示的错误消息（例如，如果输入短于 minLength，则会显示 errorminLength）
- 如果您不想针对某些值进行测试，请将参数设置为 null
For examples, look at the 3 last lines of the embedded code in this post.
例如，请查看本文中嵌入代码的最后 3 行。
Here is the new jQuery code (it is applied to the 3 first inputs of the fiddle here: http://jsfiddle.net/6fLNz/5/
这是新的 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');
});
I chose the put the error messages collectively in arrays, but you can also enter the strings directly as function parameters.
我选择将错误信息集中放在数组中，但您也可以直接输入字符串作为函数参数。
Cheers.
干杯。
