便利的html5 之 required、number 、pattern

html5对于表单验证提供了很多自识别功能,非常的便利。

看代码,

<!--head start-->
<include file="Public:head" />
<!-- style here -->
<!--head end -->
<section class="panel">
<div class="panel-body">
<form role="form" id="myform" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="{$info.id}">
<div class="form-group">
<label for="">名称</label>
<input type="text" name="name" class="form-control" id="name" placeholder="" value="{$info.name}" required>
</div> <div class="form-group">
<label for="">排序(数字大靠前)</label>
<input type="number" name="sort" value="{$info.sort}" class="form-control" id="sort" placeholder="" required>
</div> <div class="form-group">
<label for="">拼音/英文</label>
<input type="text" name="spell" class="form-control" id="spell" placeholder="" value="{$info.spell}" pattern="^[a-zA-Z]+$" required>
</div>
<button type="submit" class="btn btn-info">提交</button>
</form>
</div>
</section>
<!--foot start-->
<include file="Public:foot" />
<!--foot end -->
<!-- script here -->
<script>
var index = parent.layer.getFrameIndex(window.name);
var handle_status = '{$handle_status}';
if ( handle_status == '1' ) {
parent.$("#handle_status").val('1');
parent.layer.close(index);
} else if ( handle_status == '2' ) {
parent.$("#handle_status").val('2');
parent.layer.close(index);
} </script>

看效果,

便利的html5 之 required、number 、pattern

便利的html5 之 required、number 、pattern

便利的html5 之 required、number 、pattern

上一篇:洛谷 [P1265] 公路修建


下一篇:WampServer 在 httpd.conf 中配置多站点 (IP 配置法:不用每次修改 hosts 文件 + 域名配置法 )