angular4表单验证详解
发布时间:2020-12-17 08:55:51 所属栏目:安全 来源:网络整理
导读:背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! 1.创建表单组件: ng g c login 2.1单规则验证: label 用户名: / label input type = "text" # userNameRef = ngModel [( ngMod
背景: 1.创建表单组件: ng g c login 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRef=ngModel [(ngModel)]=userName required> <span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.valid}}</span>
效果: 2.2.多规则验证:(不能为空,用户名和密码的长度) <div class="form-group"> <label>用户名:</label> <input type="text" class="form-control" #userNameRef=ngModel minlength="3" maxlength="8" [(ngModel)]=userName required> <span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.valid}}</span> </div>
错误原因提示方式: <div class="form-group"> <label>用户名:</label> <input type="text" class="form-control" #userNameRef=ngModel minlength="3" maxlength="8" [(ngModel)]=userName required> <span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.errors|json}}</span> <div *ngIf="userNameRef.errors?.required">this is required</div> <div *ngIf="userNameRef.errors?.minlength">should be 3 chacaters</div> </div>
效果: ###:输入数据,但是长度小于3: ###:合法输入: <span [style.color]="userNameRef.valid ? 'black':'red'" *ngIf="userNameRef.errors!=null">{{userNameRef.errors|json}}</span>
具体实例登陆代码: <form #form="ngForm" (ngSubmit)="form.form.valid && submit(form.value)" novalidate class="form-horizontal" role="form">
<div class="form-group" [ngClass]="{ 'has-error': form.submitted && !userName.valid }">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input required name="userName" [(ngModel)]="user.userName" #userName="ngModel" type="text" class="form-control" placeholder="请输入用户名...">
<div *ngIf="form.submitted && !userName.valid" class="text-danger">用户名必须输入!</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10" [ngClass]="{'has-error': form.submitted && !password.valid }">
<input required minlength="8" maxlength="12" [(ngModel)]="user.password" name="password" #password="ngModel" type="password" class="form-control" placeholder="请输入密码...">
<div *ngIf="form.submitted && !password.valid" class="text-danger">密码必须输入,至少要8位!</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">登录</button>
</div>
</div>
</form>
login.component: import { Component,OnInit} from '@angular/core';
import{UserModel} from '../model/user.model';//引入了usermodel
@Component({
selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
//定义user为Usermodel
private user=new UserModel();
ngOnInit() {
}
/** * 登陆事件 * @param form 表单中的输入值 */
submit(form){
if(form.username=="1"&&form.password=="12345678"){
alert("登录成功了");
}else{
alert("非法用户");
}
}
}
3.userModel: export class UserModel{ userName:string; password:string; }
效果: 1.未填时点击登陆: 结语: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 在Scala中有一个等同于Python的更通用的地图函数?
- 容器技术之Docker私有镜像仓库harbor
- WebService大讲堂之Axis2(1):用POJO实现0配置的WebServi
- angularjs – 将Angular UI-Bootstrap限制为特定对象属性
- 4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
- WebService(2)-XML系列之用Stax操作Xml
- 文件上传 – angularjs的文件上传器集成
- 在bootstrap中,如何将图像作为下拉列表?
- twitter-bootstrap – 有jshint忽略某些文件时,建立Twitter
- twitter-bootstrap – 如何在Bootstrap 3中替换FontAwesome