angular验证

最新推荐文章于 2020-08-30 07:49:35 发布

JackMaster_xh

最新推荐文章于 2020-08-30 07:49:35 发布

阅读量445

点赞数 1

分类专栏： Bootstrap的掌握

本文链接：https://blog.csdn.net/JackMaster_xh/article/details/75213802

版权

Bootstrap的掌握专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'angular1.jsp' starting page</title>

<link rel="stylesheet" type="text/css"
href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">


<script type="text/javascript" src="static/js/jquery-3.2.1.js"></script>


<script type="text/javascript"
src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/angular.min.js"></script>
<script type="text/javascript">
//步骤二：创建和部署controller 步骤三：传入用户数据和创建验证规则
//$touch:表示用户已经碰过这个表单
var test = angular.module("myApp", []);
//创建一个controller ,"controller名称" ，然后是一个回调函数 function{在回调函数里传一个$scope进去作为dom里头一个域，域里有一个 userdata,
//最后把表单数据都存在这个userdata里 }
//“MainController”写在<body>标签里表示：此标签下所有的东西在这个ng-controlller的域里
test.controller("MainController", function($scope) {
$scope.userdata = {};
//域里还有一个submitForm，表单一旦提交后怎么办执行这个回调函数
$scope.submitForm = function() {

console.log($scope.userdata);
if ($scope.signUpForm.$invalid) {
alert("请检查你的信息！");
} else
alert("提交成功！");
};
});
//创建自定义指令
test.directive("compare", function() {
if(userdata.password==userdata.password2){
alert("密码校验成功！");
}else
alert("密码校验失败！");
//命名函数体
var o = {};
//命令作用在命令和属性上
o.strict = 'AE';
//o.scope等于一个对象

o.scope = {
//orgText等于之前的字符
orgText : '=compare'

};

o.require = 'ngModel';

//主函数传参一次是：域，当前元素，属性，ng-model
o.link = function(sco, ele, att, con) {
//最后传参给compare=回调函数传回一个值，这个值用户输入的值
con.$validators.compare = function(v) {
//之前输过的和新输入的是否一样
alert("v:"+v);
return v == sco.orgText;
};

//一旦有变化就执行function函数
sco.$watch('orgText', function() {
con.$validate();
});
};
});
</script>
<style type="text/css">
.error {
color: #a10;
}
/* p.error{
display:none;
} */
input.error {
border: 1px solid #a10;
}

.wrapper {
width: 200px;
margin: 30px auto;
}
</style>
</head>

<body ng-app="myApp" ng-controller="MainController">

<div class="wrapper">
<h2>注册</h2>
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用户名：</label>
<pre>{{signUpForm.username.$valid}}</pre>
<pre>{{userdata.username}}</pre>
<input name="username" type="text" class="form-control"
ng-model="userdata.username" ng-minlength="4" ng-maxlength="32"
required />
<p class="error"
ng-if="(signUpForm.username.$error.minlength || signUpForm.username.$error.maxlength)
&& signUpForm.username.$touched">用户名长度在4之32位之间</p>
<p class="error"
ng-if="signUpForm.username.$error.required&&
signUpForm.username.$touched">用户名名不能为空！</p>
</div>

<div class="form-group" ng-class="{'has-success': signUpForm.password.$valid}">
<label>密码：</label>
<pre>{{signUpForm.password.$valid}}</pre>
<pre>{{userdata.password}}</pre>
<input name="password" type="password" class="form-control"
ng-model="userdata.password" ng-minlength="4" ng-maxlength="122"
required />
<p class="error"
ng-if="signUpForm.password.$error.required&&
signUpForm.password.$touched">密码不能为空！</p>
<p class="error"
ng-if="(signUpForm.password.$error.minlength||signUpForm.password.$error.maxlength)
&&signUpForm.password.$touched">用户名长度在4之122位之间</p>

</div>

<div class="form-group">
<label>确认密码：</label>
<pre>{{signUpForm.password2.$valid}}</pre>
<pre>{{userdata.password2}}</pre>
<input name="password2" type="password" class="form-control"
ng-model="userdata.password2" compare="userdata.password" required/>
<p class="error"
ng-if="signUpForm.password2.$error.compare &&
signUpForm.password2.$touched">两次输入不一致！</p>
</div>

<div class="form-group">
<button class="btn btn-primary">注册</button>
</div>
</div>
</form>
</body>
</html>

JackMaster_xh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular验证

String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%>">My JSP 'angular1
复制链接

扫一扫