Шаблон проверки ввода HTML для телефонного номера [0-9] {10}, начинающийся с нуля.Сохранение его в соответствии с существующими образцами - PullRequest
Новая
       87

Шаблон проверки ввода HTML для телефонного номера [0-9] {10}, начинающийся с нуля.Сохранение его в соответствии с существующими образцами

1 голос
/ 23 сентября 2019

Я использую форму HTML с шаблонами проверки из этой статьи , но я не уверен, как сохранить такой же (стиль) шаблон проверки для телефонного номера из 10 символов, начинающегося с 0?

У меня просто есть "[0-9]{10}" атм.

Это позаботится о предыдущем 0, верно?"0([0-9]){9}"

Нужен ли мне другой начальный "^(([-\w\d]+)" и конечный материал ")$" от других входов, чтобы шаблоны были одинаковыми для всех входов, или это просто слишком усложняет требование? 

//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 <= 8 ==//
//addEvent(document, 'change', function(e, target)
//{
//	instantValidation(target);
//});

//now bind a change event to each applicable for field
var fields = [
  document.getElementsByTagName("input"),
  document.getElementsByTagName("textarea")
];
for (var a = fields.length, i = 0; i < a; i++) {
  for (var b = fields[i].length, j = 0; j < b; j++) {
    addEvent(fields[i][j], "change", function(e, target) {
      instantValidation(target);
    });
  }
}
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,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.9 17.1l-5.5-5.5-1.8 1.8L8 20.8 23.5 5.1l-1.8-1.8L7.9 17.1z" fill="%234eb239"/></svg>') 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;
}
<div class="container">



<h4 class="align-center white text-shadow">Get in touch</h4>
<form id="contactForm" method="post" action="php/mail.php">
    <fieldset>
        <div class="form-group">
            <input name="txtName" id="txtName" class="form-control" value="" aria-required="true" pattern="^([- \w\d\u00c0-\u024f]+)$" title="Your name" type="text" spellcheck="false" maxlength="30" required autofocus>
            <label class="form-control-placeholder" for="txtName">Name</label>
            <span class="focus-border"></span>
        </div>
        <div class="form-group">    
            <input name="txtEmail" id="txtEmail" class="form-control" value="" aria-required="true" pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" title="Your email address" type="email" spellcheck="false" maxlength="30" required>
            <label class="form-control-placeholder" for="txtEmail">Email</label>
            <span class="focus-border"></span>
        </div>
        <div class="form-group">
            <input name="txtPhone" id="txtPhone" class="form-control" value="" aria-required="true" pattern="[0-9]{10}" title="Your telephone number" type="tel" spellcheck="false" maxlength="10" required>
            <label class="form-control-placeholder" for="txtPhone">Telephone</label>
            <span class="focus-border"></span>
        </div>       
        <div class="form-group">
            <textarea name="txtMessage" id="txtMessage" class="form-control" aria-required="true" cols="40" rows="7" spellcheck="true" title="Your enquiry" required></textarea>
            <label class="form-control-placeholder" for="txtMessage">Enquiry</label>
            <span class="focus-border"></span>
        </div>
        <button name="btnSubmit" id="btnSubmit" class="button primary" type="submit">Submit</button>
    </fieldset>
</form>

</div>

1 Ответ

1 голос
/ 23 сентября 2019

^(([-\w\d]+) соответствует началу строки (^), а затем 1+ дефисам, подчеркиваниям, буквам или цифрам (примечание \w также соответствует цифрам, поэтому \d является избыточным), а )$ -только конец конструкции группировки и конец утверждения строки.Поэтому, если вы не планируете сопоставлять какие-либо буквы, цифры, дефисы или подчеркивания перед числом, не добавляйте шаблон ([-\w\d]+), а якоря - ^ (начало строки) и $ (конец строки) - являются избыточными - см. ниже, почему.

На самом деле, вы можете просто использовать 

pattern="0[0-9]{9}"

Этого достаточно, потому что вы уже сократили предел поля ввода до 10 с помощью maxlength="10": 

<input name="txtPhone" id="txtPhone" class="form-control" value="" aria-required="true" pattern="0[0-9]{9}" title="Your telephone number" type="tel" spellcheck="false" maxlength="10" required>
...