HTML-входной шаблон для номера телефона [0-9] {10} Начиная с нуля. Сохраняя это в соответствии с существующими моделями ⇐ Html

[Anonymous]

Я использую форму HTML с шаблонами проверки из этой статьи, но я не уверен, как сохранить тот же (стиль) валидационный шаблон для номера телефона из 10 символов, начиная с 0? "0 ([0-9]) {9}"

нужен ли мне другое начало "^(([-\ w \ d]+)" & end ") $" от других входов, чтобы сохранить шаблоны для всех входов или просто переоценки? class = "Snippet">

Код: Выделить всё

//sitepoint.com/instant-validation
//add event construct for modern browsers or IE
//which fires the callback with a pre-converted target reference
function addEvent(node, type, callback) {
if (node.addEventListener) {
node.addEventListener(
type,
function(e) {
callback(e, e.target);
},
false
);
} else if (node.attachEvent) {
node.attachEvent("on" + type, function(e) {
callback(e, e.srcElement);
});
}
}

//identify whether a field should be validated
//ie.  true if the field is neither readonly nor disabled,
//and has either "pattern", "required" or "aria-invalid"
function shouldBeValidated(field) {
return (
!(field.getAttribute("readonly") || field.readonly) &&
!(field.getAttribute("disabled") || field.disabled) &&
(field.getAttribute("pattern") || field.getAttribute("required"))
);
}

//field testing and validation function
function instantValidation(field) {
//if the field should be validated
if (shouldBeValidated(field)) {
//the field is invalid if:
//it's required but the value is empty
//it has a pattern but the (non-empty) value doesn't pass
var invalid =
(field.getAttribute("required") && !field.value) ||
(field.getAttribute("pattern") &&
field.value &&
!new RegExp(field.getAttribute("pattern")).test(field.value));

//add or remove the attribute is indicated by
//the invalid flag and the current attribute state
if (!invalid && field.getAttribute("aria-invalid")) {
field.removeAttribute("aria-invalid");
} else if (invalid && !field.getAttribute("aria-invalid")) {
field.setAttribute("aria-invalid", "true");
}
}
}

//now bind a delegated change event
//== THIS FAILS IN INTERNET EXPLORER 
import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,700|Titillium+Web:200,400,400i,700&display=swap');

*,*:before,*:after {
box-sizing: border-box;
}

body {
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
line-height: 1.4;
color: var(--color-woodsmoke);
}

:root {

--color-woodsmoke: #161B1E;
}

.container {
width:600px;
margin: 200px auto 0;

}

.container * {
transition: all 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
/*transition: all 220ms cubic-bezier(0.19, 1, 0.22, 1) 0s;*/
}

#contactForm fieldset {
border: none;
}

.form-control {
width: 100%;
display: block;
padding: .5rem 0;
font-size: 18px;
line-height: 1.25;
color: var(--color-woodsmoke);
-webkit-tap-highlight-color: transparent;
border: none;
border-bottom: 1px solid #767676;
background:
url('data:image/svg+xml;utf8,') no-repeat right -35px / 24px 24px;
/*transition: none;*/
}

.form-control:focus {
color: var(--color-woodsmoke);
/*background: none;*/
border-color: transparent;
outline: 0;
}

input[aria-invalid="true"].form-control,
textarea[aria-invalid="true"].form-control {
border-color: red;
}

.form-group {
position: relative;
margin-bottom: 2.5rem;
}

.form-control-placeholder {
position: absolute;
top: 0;
color: #767676;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
font-size: 70%;
transform: translate3d(0, -100%, 0);
}

input[aria-invalid="true"].form-control + .form-control-placeholder,
textarea[aria-invalid="true"].form-control + .form-control-placeholder {
font-size: 70%;
transform: translate3d(0, -100%, 0);
color: red;
}

.form-control:focus + .form-control-placeholder {
color: #115293;
}

.focus-border {
width: 100%;
height: 2px;
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
transform: scaleX(0);
transition: transform 280ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
background-color: #115293;
}

.form-control:focus + .form-control-placeholder + .focus-border {
transform: scaleX(1);
}

.form-control:valid:not([aria-invalid="true"]) {
border-color: #57b846;
/*background: blue;*/
background-position: right center;
}

textarea.form-control:valid:not([aria-invalid="true"]) {
background-position: right 7px;
}

/*MOZ FIX*/
:not(output):-moz-ui-invalid {
box-shadow: none;
}

input:invalid {
box-shadow: none;
}

/*CHROME FIX*/
@-webkit-keyframes autofill {
to {
color: var(--color-woodsmoke);
background: transparent;
}
}

input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}

/*
input:-internal-autofill-selected {
background-color: red !important;
background-image: inherit !important;
color: var(--color-woodsmoke) !important;
}
*/

input:-webkit-autofill {
-webkit-text-fill-color: var(--color-woodsmoke);
}
input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-woodsmoke);
}

/*TEXTAREA*/
#txtMessage {
resize: none;
}< /code>


[h4]Get in touch[/h4]




Name



Email



Telephone



Enquiry


Submit

Подробнее здесь: https://stackoverflow.com/questions/580 ... -with-zero