码迷,mamicode.com
首页 > Web开发 > 详细

html5表单验证(Bootstrap)

时间:2017-07-03 17:23:01      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:格式   onchange   cti   input   tle   密码验证   html5   disable   boot   

html5表单验证(Bootstrap)

 

技术分享邮箱验证:

<input name="email" type="text" placeholder="必填项" class="input-xlarge" required pattern="^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$"

title="邮箱正确格式:xxx@xxx.xxx">

 

密码验证:

<div class="control-group">

<label class="control-label">

密码</label>

<div class="controls">

<input id="pwd" name="pwd" type="password" placeholder="必填项" class="input-xlarge"

required onchange="checkPasswords()">

</div>

</div>

<div class="control-group">

<label class="control-label">

确认密码</label>

<div class="controls">

<input id="pwd1" name="pwd1" type="password" placeholder="必填项" class="input-xlarge"

required onchange="checkPasswords()">

</div>

</div>

验证方法:

<script>

function checkPasswords() {

var passl = document.getElementById("pwd");

var pass2 = document.getElementById("pwd1");

if (passl.value != pass2.value)

passl.setCustomValidity("两次密码必须输入一致!");

else

passl.setCustomValidity(‘‘);

}

 

function check() {

document.getElementById(‘ok‘).disabled = ‘disabled‘;

}

</script>

html5表单验证(Bootstrap)

标签:格式   onchange   cti   input   tle   密码验证   html5   disable   boot   

原文地址:http://www.cnblogs.com/lovebing/p/7111918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!