时间戳

首页 > 解决方案 > 带有电话面具的验证表

javascript - 带有电话面具的验证表

问题描述

我有一个带有电话面具的表格，但是当所有电话号码都没有填写时，我无法制作红色borderColor，而当一切都正确时，我无法制作绿色。

在此处输入图像描述

HTML

<form id="border1">
     <input type="text" placeholder="Phone number" class="phone_mask">
</form>
    <button id="button" class="form-button" onclick="checkNum(document.querySelector('.phone_mask'))">
        Sign up
    </button>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.js"
    type="text/javascript"></script>

CSS

.phone_mask {
  border: 2px solid #eef0ef;
  border-radius: 3px;
  height: 41px;
  width: 327px;
  margin: 30px 0px 0px 19px;
  padding-left: 12px;
  outline: none;
}

.phone_mask:focus {
  border: 2px solid #bdd9f7;
  border-radius: 2px;
  box-shadow: 0px 0px 2px 3px #bdd9f7;
  height: 41px;
  width: 327px;
  outline: none;
}

JS

let phoneBlock = document.querySelector('.phone_mask')
let phone = $(".phone_mask").mask("+38(099)999-99-99");

function checkNum() {

    if (!phone) {
        phoneBlock.style.borderColor = 'red';
    }
    else {
        phoneBlock.style.borderColor = 'green'
    }

}

请帮帮我，谢谢！

标签： javascript

解决方案

您不需要使用 JavaScript 来验证电话模式。

相反，使用输入属性pattern来验证模式，然后使用伪类为有效模式添加边框:valid

我的代码中的模式应该是+38-999-99-999

.phone_mask {
  border: 2px solid #eef0ef;
  border-radius: 3px;
  height: 41px;
  width: 327px;
  margin: 30px 0px 0px 19px;
  padding-left: 12px;
  outline: none;
}

.phone_mask:focus {
  border: 2px solid #bdd9f7;
  border-radius: 2px;
  box-shadow: 0px 0px 2px 3px #bdd9f7;
  height: 41px;
  width: 327px;
  outline: none;
}

.phone_mask:valid {
  border: 2px solid limegreen;
}
<form id="border1">
  <input type="tel" placeholder="Phone number" class="phone_mask" 
  pattern="[+]{1}[3]{1}[8]{1}-[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
  <button id="button" class="form-button" onclick="">Sign up</button>
</form>

对于电话号码，请使用type="tel".

pattern简而言之属性：

  • 使用方括号 ( []) 指定什么字符（或字符范围） - [1-9]/ [+]/[9]
  • 之后，使用摆动括号 ( {}) 指定应该有多少个字符 -{1}等{2}。
  • 在您之间可以添加分隔符 - (-或/)

如果你严格地想使用.maskjQuery，你去：

带有 jQ​​uery 和 Masked Input 插件的电话掩码

学到更多：

模式属性和输入类型

推荐阅读