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 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
javascript的BOM汇总
Jul 16 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP多态代码实例
2015/06/26 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
django1.8使用表单上传文件的实现方法
2016/11/04 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
商务专员岗位职责
2013/11/23 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
销售2014年度工作总结
2014/12/08 职场文书
女性健康讲座主持词
2015/07/04 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Python中可变和不可变对象的深入讲解
2021/08/02 Python