HTML 输入模式验证无效
HTML input pattern validation is not working
我正在尝试使用模式属性验证我的 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>
请检查一下,让我知道我做错了什么。
您的代码看起来很棒。只需将它添加到表单标签中,就像这样
<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>
我试过了。两者似乎都工作正常。
<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.
我正在尝试使用模式属性验证我的 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>
请检查一下,让我知道我做错了什么。
您的代码看起来很棒。只需将它添加到表单标签中,就像这样
<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>
我试过了。两者似乎都工作正常。
<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.