IT技术博客网IT技术博客网IT技术博客网

当前位置: 首页 > 前沿

html表单input密码重复验证是否正确


                    <form class="form-horizontal" role="form" action="" method="post">

                        <div class="form-group">

                            <label for="username" class="col-sm-2 control-label no-padding-right">用户名</label>

                            <div class="col-sm-6">

                                <input class="form-control" id="username" placeholder="" name="username" required="" type="text">

                            </div>

                            <p class="help-block col-sm-4 red">* 必填</p>

                        </div>


                        <div class="form-group">

                            <label for="password" class="col-sm-2 control-label no-padding-right">密码</label>

                            <div class="col-sm-6">

                                <input class="form-control" id="password" placeholder="" name="password" required="" type="password">

                            </div>

                            <p class="help-block col-sm-4 red">* 必填</p>

                        </div>


                        <div class="form-group">

                            <label for="mima" class="col-sm-2 control-label no-padding-right">再次确认密码</label>

                            <div class="col-sm-6">

                                <input type="password" class="form-control"   name="password_confirm" required oninput="check(this)">

                            </div>

                            

                            <p id="message"></p>

                        </div>


                        <div class="form-group">

                            <div class="col-sm-offset-2 col-sm-10">

                                <button type="submit" class="btn btn-default">保存信息</button>

                            </div>

                        </div>

                    </form>



                    <script>

function check(input) {

if(input.value != document.getElementsByName('password')[0].value) {

document.getElementById('message').style.color = 'red';

document.getElementById('message').innerHTML = '两次密码输入不一致!';

return false;

} else {

document.getElementById('message').style.color = 'green';

document.getElementById('message').innerHTML = '密码输入正确!';

return true;

}

}

</script>



技术QQ交流群:157711366

技术微信:liehuweb

写评论