引导空字段验证用于其他验证

我为我的网站下载了一个引导主题，它对必填字段进行了简单但漂亮的验证。如果未填写该字段，它会在字段背面显示一个红色感叹号，当您将鼠标悬停在其上时，它会显示字段内的错误消息。

HTML 代码是：

<div class="wrap-input100 validate-input m-b-10" data-validate = "Username is required">
<input class="input100" type="text" name="username" placeholder="Username">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>

CSS是：

.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: white;
border: 1px solid #c80000;
border-radius: 14px;
padding: 4px 25px 4px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 8px;
pointer-events: none;
font-family: Montserrat-Bold;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "f06a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 13px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
@media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}

和 JQuery：

(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) === false){
showValidate(input[i]);
check=false;
}
}
return check;
});

$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
$(thisAlert).removeClass('alert-minimum-validate');
}

})(jQuery);

现在，我也很乐意使用此代码进行其他验证。因此，例如，如果填写了用户名，但它大于最大字符数，我想更改 HTML 中的数据验证中声明的错误消息并让它显示该消息。或者，如果密码不包含特殊字符或数字，请更改该字段的消息并显示它。如果有多个消息，我只想显示第一个。

问题是：我不知道从哪里开始，我几乎无法再次键入相同的html/css/JQuery，为不同的函数使用不同的名称，因为这意味着很多相同的代码，这不是好的编码。希望你能帮助我，或者为我指出正确的方向？

提前致谢

在validate函数中，您可以添加另一个if。
类似的东西

if( $(input).attr('type') == 'text' && $(input).val().length > 10 ) {
return false;
}

这将：

检查输入类型是否为"文本">
检查其值是否超过 10 个字符

要检查字符串或"密码"是否包含特殊字符，您可以使用如下内容：

if( $(input).attr('type') == 'password' && /^[a-zA-Z0-9- ]*$/.test($(input).val()) != false) {
return false;
}

同样
，这将：

检查输入类型是否为"密码">
它的值是否只包含小写字符、大写字符和数字(检查正则表达式，它在验证等方面非常有用(

剩下的就看你的想象力:)

相关内容

最新更新

热门标签：