Javascript 验证输入最小最大字数

var validateForm=（函数（）{
var选项={}；
var classError='error'；
var showFieldValidation=函数（输入，输入有效）{
如果（！inputIsValid）{
如果（！input.parentNode.className | | input.parentNode.className.indexOf（options.classError）=-1）{
input.parentNode.className+=''+选项.classError
}
}否则{
var regError=new RegExp（“（\\s |^）”+options.classError+”（\\s |$）；
input.parentNode.className=input.parentNode.className.replace（regError“”）；
}
};
var testInputText=函数（输入）{
var fieldHasError=false；
var mailReg=new RegExp（“^[0-9a-zA-Z_.-]”，“'gi'）；
如果（！mailReg.test（输入值））{
showFieldValidation（输入，错误）；
返回false；
}否则{
showFieldValidation（输入，真）；
返回true；
}
};;
var prepareElements=函数（）{
var elements=options.form.querySelectorAll（'input[required]'）；
[]forEach.call（元素、函数（元素）{
元素。removeAttribute（“必需”）；
element.className+=“必需”；
if（element.nodeName.toUpperCase（）=='INPUT'）{
var type=element.type.toUpperCase（）；
如果（类型=='TEXT'）{
元素。addEventListener（'keyup'，function（）{
testInputText（元素）
});
元素。addEventListener（'blur'，function（）{
testInputText（元素）
});
}
}
});
};
var formSubmit=函数（）{
options.form.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
var=true；
//pobieramy wszystkie pola，którym wcześniej ustawiliśmy klasę
var elements=options.form.querySelectorAll（'.required'）；
//podobne działanie jużrobiliśmy przy prygotowywaniu pól
[]forEach.call（元素、函数（元素）{
if（element.nodeName.toUpperCase（）=='INPUT'）{
var type=element.type.toUpperCase（）；
如果（类型=='TEXT'）{
如果（！testInputText（元素））已验证=false；
}
}
});
如果（已验证）{
这个。提交（）；
}否则{
返回false；
}
});
};
var init=函数（_选项）{
//NAZEGO模块是否符合要求
选项={
表单：_options.form | | null，
classError:_options.classError | |“error”
}
if（options.form==null | | | options.form==undefined | | | options.form.length==0）{
console.warn（'validateForm:bad form'）；
返回false；
}
准备元素（）；
formSubmit（）；
};
返回{
init:init
}
})();
document.addEventListener（“DOMContentLoaded”，function（））{
var form=document.querySelector（'.form'）；
validateForm.init({
表格：表格
})
});
input[type=text]。作为67中的标签：焦点{
轮廓样式：无；
}
.form.error输入[类型=文本]{
颜色：#DB083E；
边框颜色：#DB083E；
框阴影：0 0 2px 2px红色；
}

标题
注意，
css
的属性选择器处的值需要用引号括起来

input[type=text]

在
css
处不是有效的属性选择器。取代

input[type="text"]

您可以使用
html5
模式
属性和
RegExp
^0-9a-zA-Z.-{5100}
在
元素中使用
元素和
属性值设置为要显示的
元素的
id

'应至少添加5个字符'

在
css
:after
伪元素
内容
使用
：无效
，
：有效
伪类

用重复的
数据最小长度
数据-*
属性代替
minlength


输入[type=“text”]。直到l67\u文本：无效+[for=“til\u 167”]{
颜色：红色；
}
输入[type=“text”]。直到l67\u文本：有效+[for=“til\u 167”]{
显示：无；
}
标签[for=“til_167”]：在{
内容：“‘应添加至少5个字符’”；
}

标题
“'should add min 5 characters'”任何五个字符都是有效输入吗？例如，五个空格字符？两个
data min length
属性的用途是什么？不，javascript代码不允许插入空格，data min length被删除，我测试了各种方法，但忘记了删除它：）