双恒前端教程 H5教程 2023-12-21 03:53:06

H5完成用户注册自动校验的实例详解

Html5实现用户注册自动校验功能实例代码

05-24 10:49:46作者：双恒网络

抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。

以下是效果截图：

1.页面代码：usersRegister.hbs

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang=en>
<label>密码:</label><input id=pass name=password type=text />
</div>
<div>
<label>邮箱:</label><input id=email name=email
data-ideal=required email type=email />
</div>
<div>
<label>电话:</label><input id=telephone type=text name=phone data-ideal=phone />
</div>
<div>
<label>供应商V码:</label><input id=vCode type=text name=vCode data-ideal=vCode />
</div>
<div>
<label>真实姓名:</label><input id=trueName type=text name=trueName data-ideal=trueName />
</div>
<div>
<label>手机验证码:</label><input id=telCode type=text name=telCode data-ideal=telCode />
</div>
<div style=margin-bottom:5px;>
<button id=getTelCode type=button style=margin-left:160px; margin-right:auto; >获取手机校验码</button>
<hr style=margin-top:5px; margin-bottom:5px; />
</div>

分享到：