5

我正在尝试使用模式属性验证我的 HTML 输入。在某些情况下它可以工作，在某些情况下它不工作，我无法弄清楚它为什么会中断。

让我与您分享两段代码。代码 1 正在工作。代码 2 不是。我先写了代码 1，然后写了代码 2。我从字面上复制粘贴了代码 2，但由于某种超出我理解的原因，它不起作用。一探究竟。

CODE1（正在工作的那个）

<input id="clinicProfileNumber" name="clinicProfileNumber" ng-model="clinic.profile.number" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">

Code2（不工作的那个）

<input id="doctorProfileContactnumber" name="doctorProfileContactnumber" ng-model="doctor.profile.contactNumber" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">

让我给你一些其他不起作用的代码示例：

<input id="doctorProfileEmail"
       name="doctorProfileEmail"
       ng-model="doctor.profile.email"
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
       required type="text"
       class="user-input"
       title="Please enter a valid email." />

<input id="doctorProfilePassword"
       name="doctorProfilePassword"
       ng-model="doctor.profile.password"
       type="text"
       class="user-input"
       pattern=".{6,}"
       title="Must contain at least 6 or more characters">

</div>

请检查一下，让我知道我做错了什么。

4

2 回答 2

3

你的代码看起来很棒。只需将它添加到表单标签中，就像这样

<form action="demo">
    Country code: <input type="text"
                         name="country_code"
                         pattern="[A-Za-z]{6,}"
                         title="Three letter country code">

    <input id="doctorProfileContactnumber"
           name="doctorProfileContactnumber"
           ng-model="doctor.profile.contactNumber"
           type="text"
           class="user-input"
           pattern="[0-9]{10}"
           title="10 digit mobile number">

    <input type="submit">
</form>
于 2016-01-14T07:23:38.170 回答
0

我试了一下。似乎他们俩都工作得很好。

<form name="formname">
    <input id="clinicProfileNumber" name="clinicProfileNumber" ng-model="clinic.profile.number" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">
    <input id="doctorProfileContactnumber" name="doctorProfileContactnumber" ng-model="doctor.profile.contactNumber" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">
    <input name="" type="submit" />
</form>

这可能是因为您的输入元素没有像 shrikant 所说的那样包含在表单标签中，或者您的 JavaScript 模型可能存在冲突。尝试删除 ng-model。

于 2016-01-14T07:37:57.773 回答