- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个允许 9-11 位数字长度的电话号码的函数(目前该函数允许 11 位数字)。
当我编写电话号码检查器的函数并将其放在我的 JavaScript 的底部时,我的电子邮件检查器功能不再正常工作。
我需要找到一种解决方案,使电子邮件和电话号码功能都能正常工作。
如果有人有解决方案,您的意见会很棒。
HTML:
<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<label>First Name
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Last Name
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Email
<input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
</label>
<label>Phone
<input id="phone" maxlength="40" name="phone" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>City
<input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>State/Province
<input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label id="co">Company
<input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i>
</label>
<label>Comments
<textarea id="comments"name="" id="" cols="30" rows="10" onkeyup="test()"></textarea>
<input id="sub" type="submit" disabled="disabled" />
</label>
<div>
<select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest">
<option value="">--None--</option>
<option selected="selected" value="Visiant">Visiant</option>
<option value="Tessellate">Tessellate</option>
</select><br>
<select hidden="true" id="lead_source" name="lead_source">
<option value="">--None--</option>
<option value="Internal">Internal</option>
<option value="Trade Show">Trade Show</option>
<option selected="selected" value="Website">Website</option>
<option value="Direct Marketing">Direct Marketing</option>
<option value="Social Media">Social Media</option>
<option value="Other">Other</option>
</select><br>
</div>
</form>
CSS:
body {
color: #fff;
background-color: #f78e2a;
text-align: center;
}
form {
color: #fff;
background-color: #f78e2a;
text-align: center;
font-family: Lato;
}
* {
box-sizing: border-box;
}
.form-title {
font-size: 38px;
color: #fff;
font-family: "Lato";
letter-spacing: 70px;
}
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #f9a558;
border: 1px solid #fff;
}
input[type="text"]:focus {
background-color: #fff;
}
input[type="text"]:visited {
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
margin-left: 10%;
margin-right: 10%;
}
textarea {
width: 100%;
background-color: #f9a558;
border: 1px solid #fff;
}
textarea:focus {
background-color: #fff;
}
#co {
flex-basis: 100%;
max-width: 100%;
}
label:nth-last-child(-n+2) {
flex-basis: 100%;
max-width: 100%;
}
select,
label {
height: 50px;
width: 48%;
margin: 2% 1%;
text-align: left;
font-family: "Lato";
}
#sub {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 10px;
}
button {
margin-top: 10px;
background-color: #B9B9B9;
color: #959595;
border-radius: 6px;
width: 120px;
height: 35px;
margin-left: 1%;
display: block;
}
button:focus {
background-color: #fff;
color: #f78e2a;
}
@media (max-width: 426px) {
label {
width: 98%;
}
}
@media (min-width: 426px) {
.container {
flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
}
}
label {
position: relative;
}
.fa {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, -5%);
opacity: 0;
transition: opacity .5s, color .5s;
}
[data-valid] + .fa {
opacity: 1;
color: green;
}
[data-valid="valid"] + .fa {
color: green;
}
[data-valid="error"] + .fa {
color: red;
}
jQuery:
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
$('input[type="text"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#email')) {
if (validateEmail($(this).val())) {
$label.attr('data-valid', 'valid');
} else {
$label.attr('data-valid', 'error');
console.log("this works")
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
test = function() {
if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) {
$("#sub").removeAttr("disabled");
}
}
function phoneNumber(phone) {
var phoneno = /^\d{11}$/;
return phoneno.test(phone);
}
$('input[type="text"]').on('keyup', function() {
if ($(this).val().trim() != '') {
if ($(this).is('#phone')) {
if (phoneNumber($(this).val())) {
$(this).attr('data-valid','valid');
} else {
$(this).attr('data-valid','error');
console.log("this works")
}
} else {
$(this).attr('data-valid','valid');
console.log("this works")
}
} else {
$(this).removeAttr('data-valid');
console.log("this works")
}
});
最佳答案
我从你的other question开始...关于您的手机长度验证。
var phoneno = /^\d{9}|\d{10}|\d{11}$/;
如果找到 9、10 或 11 位数字的序列,上面的代码将返回 true...
但也适用于 12、13,最多 n 位数字。
以下是使用正则表达式限制 9 到 11 位数字的方法:
var phoneno = /^\d{9,11}$/;
关于 <input type="tel">
的简短说明,它还不兼容浏览器, as shown here .
关于html - 表格 - 电话号码验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45066639/
我有一个包含姓名、电子邮件和内容文本区域的表单。一切正常,但当我尝试为手机号码添加 1 个表单输入时,表单不会提交。 Javascript: function hgsubmit() { i
所以我正试图在 Scheme 中找出整个 call/cc 的东西。下面是我正在使用的代码: (+ 1 (call/cc (lambda (k) (if (number? k)
所以我正试图在 Scheme 中找出整个 call/cc 的东西。下面是我正在使用的代码: (+ 1 (call/cc (lambda (k) (if (number? k)
我在 list 中有权限: 检查电话是否正在使用的代码可能会为无法接听电话的平板电脑等设备启动安全异常。所以,我制作了这个方法来检查是否设备可以使用 TelephonyManager: priva
我想知道 facebook API 允许 PHP 网页提取以下用户数据的先决条件是什么: 姓名 电子邮件 电话 据我了解,提取电话号码需要您的网站在 facebook/Websense 的白名单中吗?
我如何从我的应用程序调用特定号码的电话?给我一些执行此任务的逻辑或代码... 最佳答案 使用 UIApplication 的 openURL: 方法: [[UIApplication sharedAp
在 URI 中,空格可以编码为 + .既然如此,那么在创建具有国际前缀的 tel URI 时是否应该对前导加号进行编码? 哪个更好?两者在实践中都有效吗? Call me Call me 最佳答案 不
我正在尝试使用 Insomnia 调用 SOAP 电话 - 特别是试图让帖子成功。我将 URL 定义为端点,并将正文类型作为带有 SOAP 内容(信封、标题、正文)的 XML。我在标题中定义了用户 I
服务器有没有办法将一些数据无线无缝地推送到客户端,可能是 Windows(电话)、iPhone、Mac 或 Android 设备,没有任何操作系统集成? 如果是这样,最好的设计模式是什么,最好的技术是
我有一个搜索字段,我希望用户能够通过电话或电子邮件进行搜索。但是,我的 onclick 事件没有触发。我已经尝试过控制台工具,但似乎无法通过那里进行调试。 {% from "_form
如果重新加载接收调用的浏览器窗口,我将面临实时 Twilio 调用被丢弃的情况。有没有办法在不影响实时通话的情况下克服这种挫折? 最佳答案 Twilio 布道者在这里。 根据您的问题,我假设您使用的是
我试图在我的服务中减少我的 promise 对象。我有类似的东西 angular.module('myApp').service('testService', ['Employees','$q',
我想在我的java应用程序中构建一个电话调用器。为此,我使用了 JAIN-SIP 库。第一次 INVITE 后,系统需要代理身份验证。第二个邀请是在“AuthenticationHelperImpl.
两天前我正在开发一个 VOIP 应用程序,并成功地使用 Sinch 实现了一个普通的应用程序到应用程序调用。 .该应用程序运行良好。当我开始时,我在他们的文档中看到他们支持电话 session 。 现
我正在尝试创建一个 java 程序,它将创建 excel 文件并将其上传到谷歌驱动器中。上传后我需要它来授予权限。我已经完成了所有这些,但问题在于尝试将 excel 文件转换为 google 文件,以
我想使用 Android Sip 进行电话 session .那可能吗?有人可以举一个有效的例子吗?使用该库是否有任何限制,比如它可以在 3G 或 4G 上工作? 最佳答案 当前的 Android S
是否可以通过编程方式在 android 中接听电话? 我发现有些地方不可能,但后来安装了应用程序 https://play.google.com/store/apps/details?id=com.a
我试图在单击导航中的某个按钮后将一个类附加到 div。 $navButtons.on('click', navigationClick); // liseten to the navigation a
在 Monotouch 中是否有任何方法可以读取电话或调用者服务的当前状态? 我正在尝试寻找某种方式来读取通话是否处于事件状态或通话是否处于等待状态等。 用谷歌搜索没有找到任何结果。 希望运行一些代码
我可能正在搜索错误的内容,这可能解释了为什么我只能找到有关设置密码自动填充的信息。 我正在寻找用户能够在应用程序中输入电子邮件、电话、名字和姓氏的功能,就像某些网站能够做到的那样,选项出现在键盘上方。
我是一名优秀的程序员,十分优秀!