Question

我正在尝试使用pattern属性验证我的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>

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

Answer 1

您的代码看起来很棒，只需将其添加到表单标记中，就像这样

<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>

Answer 2

尝试过它们似乎都能正常工作

<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已声明或您的js模型可能存在冲突尝试删除ng-model

HTML输入模式验证无效

2 个答案: