使用map函数验证每个输入，并在输入周围创建边框，按一下按钮上的无效或空边框。
使用map函数验证每个输入，并在输入周围创建边框，按一下按钮上的无效或空边框。
提问于 2022-11-20 04:44:00
我正在处理一个包含多个步骤的表单，因此在每个步骤中，当我单击next时，它使用map函数验证当前的活动步骤页面。我想要实现使用map函数来验证每个输入，并在输入周围创建边框，这是无效的或空的，单击我要这样做的原因是，我不想一个一个地得到输入的值，然后在它们上应用条件。
新的JS和jQuery。如有任何帮助，将不胜感激。
到目前为止我尝试了什么，但没有结果，只有错误
var getstep1 = $("#step1 :input").map(function(getinput)
{
if($(getinput).val() == '')
{
return $(this).css('width', '10px');
}
else
{
$(".next").click(function() {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
}
// return this.value;
}).get();回答 1
Stack Overflow用户
发布于 2022-11-20 04:58:35
别把事情搞得那么复杂。您可以使用表单验证器插件- Validator.js，您可以下载它这里。
- 将validator.js脚本加载到文档中。
- 如果要验证包含多个输入的表单字段，请加载multifield.js。
- 禁用窗体上的本机HTML5数据验证。
... - 使用以下属性将验证器应用于表单字段：
- 要求:需要吗？
- 模式：“数字”、“字母数字”、“url”、“电话”、“电子邮件”或自定义regex。
- 数据-验证-单词:指定该字段的最小字数。
- 数据验证长度:指定字段允许的长度(修剪后)。例如: 3,10表示字段只能有3或10个字符。
- 数据验证-长度-范围:指定字段中的最小和/或最大字符数(在trim之后)。
- 数据验证链接:指定当前字段的值(属性设置为on)应该与之比较的字段。
- 数据验证-minmax:指定最小值和/或最大值。 姓名、职业电子邮件确认电子邮件地址
- 初始化表单元素上的表单验证器并完成。 var验证器=新的FormValidator(这里的{ //选项})；
- 在提交时验证表单(可选)。 document.forms.onsubmit =函数(E){ var var= true，validatorResult = validator.checkAll(this)；console.log(validatorResult)；返回!!validatorResult.valid；}；
- 配置表单验证程序的默认设置。 var验证器=新的FormValidator({ //显示警告工具提示警报: true，//定制触发器事件/例如“模糊”、“输入”、“更改”事件: false、//预定义验证器regex：{ url :/^(https？：// )？(\w+A{2，})+/?/，电话:/^+？(0-9- ')+$/i，数字: /^0-9+$/i，字母数字: /^a-zA-Z0-9+$/i，电子邮件：{ illegalChars : /[()<>，；：\/“[]/，筛选器:/^.+@.+.{2，6}$ // exmaple电子邮件”steve@s-i.年间“} }，//默认CSS类：{ item：'field'，警告：‘警告’，坏：‘坏’})；
- 默认错误消息。 正文：{无效：'inupt不像预期的‘，短：’输入太短‘，长：’输入太长‘，选中：’必须检查‘，空：’请在这里放置一些东西‘，选择：’请选择一个选项‘，number_min：’太低‘，number_max：’太高‘，网址：“无效网址”，号码：“不匹配”，电子邮件：“电子邮件地址无效”，email_repeat：“电子邮件不匹配”，日期：“无效日期”，时间：“无效时间”，password_repeat：“密码不匹配”，no_match：“不匹配”，完成：“输入不完整”}，
表单将如下所示：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74505707
复制相关文章
相似问题
腾讯云开发者
