Angular4表单验证代码详解


Posted in Javascript onSeptember 03, 2017

 背景:

     最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!!

--------------------------------------------------------------------------------

1.创建表单组件:

ng g c login1

2.1单规则验证:

<label>用户名:</label>
 <input type="text" #userNameRef=ngModel [(ngModel)]=userName required>
 <span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.valid}}</span>

--------------------------------------------------------------------------------

效果:

Angular4表单验证代码详解

Angular4表单验证代码详解

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>

效果:

###:初始化,没有输入数据:

Angular4表单验证代码详解

###:输入数据,但是长度小于3:

Angular4表单验证代码详解

###:合法输入:

Angular4表单验证代码详解 

  当然这里有一个问题,就是合法的时候usernameRef.errors=null,但是用户看起来不太美观,所以就需要判断当usernameRef.errors=null的时不出现:

<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.未填时点击登陆:

Angular4表单验证代码详解 

2.输入登陆:

Angular4表单验证代码详解 

3.非法用户: 

Angular4表单验证代码详解

总结

以上所述是小编给大家介绍的Angular4表单验证代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
小程序自定义弹框效果
Nov 16 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 #Javascript
javascript帧动画(实例讲解)
Sep 02 #Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 #Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 #Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 #Javascript
使用vue-resource进行数据交互的实例
Sep 02 #Javascript
You might like
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python打印不合法的文件名
2020/07/31 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
银行进社区活动总结
2014/07/07 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
平遥古城导游词
2015/02/03 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
CSS极坐标的实例代码
2021/06/03 HTML / CSS
Python编写nmap扫描工具
2021/07/21 Python