angular 表单验证，密码双向验证

最新推荐文章于 2021-07-14 14:35:03 发布

wyn314

最新推荐文章于 2021-07-14 14:35:03 发布

阅读量749

点赞数

分类专栏： angular 常用插件文章标签： angular 密码表单

angular 常用插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 没有用一句js代码实现密码双向验证。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet"
    href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('registerCtrl', function($scope) {

    });
</script>
</head>
<body onload="document.getElementById('email').focus()">
    <div class="col-sm-6 col-sm-offset-3" ng-app="myApp"
        ng-controller="registerCtrl">
        <h1>用户注册</h1>
        <form name="registerForm" novalidate>
            <div id="email-group">
                <label for="email">E-mail:</label> <input type="email"
                    class="form-control" ng-model="email" name="email" id="email"
                    placeholder="请输入电子邮箱..." required>
                <p>
                    <span style="color: red" ng-show=" registerForm.email.$invalid">
                        <span ng-show="registerForm.email.$error.required">*请输入邮箱</span> <span
                        ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>
                    </span>
                </p>
            </div>

            <div id="name-group">
                <label for="name">昵称：</label> <input type="text"
                    class="form-control" ng-model="name" name="name" id="name"
                    placeholder="请输入昵称..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.name.$invalid">
                        <span ng-show="registerForm.name.$error.required">*请输入姓名</span>
                    </span>
                </p>
            </div>

            <div id="password-group">
                <label for="password">密码：</label> <input type="password"
                    class="form-control" ng-model="password" ng-minlength="6"
                    ng-maxlength="20" name="password" id="password"
                    placeholder="请输入密码..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.password.$invalid">
                        <span ng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>
                        <span ng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>
                    </span>
                </p>
            </div>

            <div id="passwordagaingroup">
                <label for="passwordagain">再输入一遍密码：</label> <input type="password"
                    class="form-control" ng-model="passwordagain" name="passwordagain"
                    id="passwordagain" placeholder="请再输一遍密码..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.password.$valid">
                        <span ng-show="passwordagain!=password">*两次密码输入不一致</span>
                    </span>
                </p>
            </div>

            <button type="submit" class="btn btn-success"
                ng-disabled="registerForm.email.$invalid || registerForm.name.$invalid || registerForm.password.$invalid || password != passwordagain">
                提交<span class="fa fa-arrow-right"></span>
            </button>
        </form>
    </div>


</body>
</html>

2. jade表单校验实现

form(name='setPasswordForm', role='form', novalidate='')
    .bk-password
        .bk-form-row.row-padding(ng-show='PasswordAll[0].class')
            label.bk-form-row-name(for='userPassword')
                span.text-danger *
                | 登录密码：
            .bk-form-row-cell
                .bk-form-row-li
                    .col-lg-3(style=' padding-left: 1px;')
                        input#userPassword.form-control.ng-pristine.ng-invalid.ng-invalid-required.ng-valid-maxlength.ng-valid-minlength.ng-valid-pattern(ng-model='setPassWordInfo.userPassword', ng-required='true', type='password', name='userPassword', placeholder='请输入密码', ng-minlength='8', ng-maxlength='30', ng-pattern='/(?=^\\S{8,30}$)(?!^[\\d\\W_]*$)(?!^[\\da-z]*$)(?!^[\\dA-Z]*$)(?!^[\\W_a-z]*$)(?!^[\\W_A-Z]*$)(?!^[a-zA-Z]*$)\\S*$/', ng-trim='false', ng-change='checkInput()')
                .bk-form-row-txt(ng-show='!(setPasswordForm.userPassword.$dirty && setPasswordForm.userPassword.$invalid || submitted && setPasswordForm.userPassword.$invalid)')
                    span.bk-form-row-li-info 8-30个字符，且同时包含三项（大写字母、小写字母、数字、特殊字符）
                .help-block.ng-hide(ng-show='setPasswordForm.userPassword.$dirty && setPasswordForm.userPassword.$invalid || submitted && setPasswordForm.userPassword.$invalid')
                    small.error.text-danger(ng-show='setPasswordForm.userPassword.$error.required') 密码是必须的
                    small.error.text-danger.ng-hide(ng-show='setPasswordForm.userPassword.$error.minlength || setPasswordForm.userPassword.$error.maxlength') 必须是8-30位
                    small.error.text-danger.ng-hide(ng-show='setPasswordForm.userPassword.$error.pattern') 8 - 30 个字符，必须同时包含三项（大写字母、小写字母、数字、 ()`~!@#$%^&*-+=|{}[]:;'<>,.?/ 中的特殊符号）。
        .bk-form-row.row-padding(ng-show='PasswordAll[0].class')
            label.bk-form-row-name(for='confrmPass')
                span.text-danger *
                | 确认密码：
             .bk-form-row-cell
                 div(ng-model='password2')
                     .bk-form-row-li
                        input.form-control.ng-pristine.ng-invalid.ng-invalid-required.ng-valid-maxlength.ng-valid-minlength.ng-valid-pattern(id='confrmPass', ng-model='setPassWordInfo.confirmPassword', ng-required='true', style='width: 22%', ui-validate="'$value==setPassWordInfo.userPassword'", ui-validate-watch="'setPassWordInfo.userPassword", type='password', name='confirmPassword', ng-minlength='8', ng-maxlength='30', ng-pattern='/(?=^\S{8,30}$)(?!^[\d\W_]*$)(?!^[\da-z]*$)(?!^[\dA-Z]*$)(?!^[\W_a-z]*$)(?!^[\W_A-Z]*$)(?!^[a-zA-Z]*$)\S*$/', ng-trim='false', ng-change='checkInput()')
                 .help-block.ng-hide(ng-show='setPasswordForm.confirmPassword.$dirty && setPasswordForm.confirmPassword.$invalid || submitted && setPasswordForm.confirmPassword.$invalid')
                     small.error.text-danger.ng-hide(ng-show="setPassWordInfo.confirmPassword != setPassWordInfo.userPassword") 两次密码输入不一致，请重新输入

wyn314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular 表单验证，密码双向验证

1. 没有用一句js代码实现密码双向验证<!DOCTYPE html><html><head><meta charset="UTF-8"><title>register</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"><script
复制链接

扫一扫

专栏目录