gpt4 book ai didi

javascript - 验证表单上的两个字段

转载 作者:行者123 更新时间:2023-12-03 01:34:29 26 4
gpt4 key购买 nike

我想知道是否有人需要帮助我验证我的表单。需要验证的两个字段是门牌号和邮政编码我需要将门牌号设置为只有两个数字邮政编码只有 5 个字符。

我使用了一种模式属性,并且想知道是否可以在多个字段上显示该消息。

<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
<label>Address</label>
<br>
<input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}">
<br>
<br>
<input name="address2" type="text" placeholder="Street Name">
<br>
<br>
<input name="city" type="text" placeholder="City/Town">
<br>
<br>
<input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}">
<br>
<br>
<label>Plant Type</label>
<br>
<select name="plant">
<option value="tree">TREE</option>
<option value="shrub">SHRUB</option>
</select>
<br>
<br>
<label>Description</label>
<br>
<textarea input name="description">
</textarea>
<br>
<br>
<label>Rating</label>
<br>
<div class="rating">
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>


<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>
<br>
<br>
<button type="submit">SUBMIT</button>
</form>

最佳答案

简单地,你可以使用 html 属性 maxlength = "2"来做到这一点

例如

<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
<label>Address</label>
<br>
<input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}" maxlength="2">
<br>
<br>
<input name="address2" type="text" placeholder="Street Name">
<br>
<br>
<input name="city" type="text" placeholder="City/Town">
<br>
<br>
<input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}" maxlength="5">
<br>
<br>
<label>Plant Type</label>
<br>
<select name="plant">
<option value="tree">TREE</option>
<option value="shrub">SHRUB</option>
</select>
<br>
<br>
<label>Description</label>
<br>
<textarea input name="description">
</textarea>
<br>
<br>
<label>Rating</label>
<br>
<div class="rating">
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>


<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>
<br>
<br>
<button type="submit">SUBMIT</button>
</form>

关于javascript - 验证表单上的两个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51134605/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com