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") 两次密码输入不一致,请重新输入