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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
js模拟微博发布消息
Feb 23 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
详解javascript void(0)
Jul 13 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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的静态成员函数效率更高的原因
2014/06/13 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
javascript中layim之查找好友查找群组
2021/02/06 Javascript
python 中的int()函数怎么用
2017/10/17 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Sanic框架流式传输操作示例
2018/07/18 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python容器类型公共方法总结
2020/08/19 Python
Python偏函数实现原理及应用
2020/11/20 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
jQuery treeview树形结构应用
2021/03/24 jQuery
《手指教学》反思
2014/02/14 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
优秀学生评语大全
2014/04/25 职场文书
篮球赛口号
2014/06/18 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
2015年团支书工作总结
2015/04/03 职场文书
开学第一周总结
2015/07/16 职场文书
网络研修心得体会
2016/01/08 职场文书
详解Redis复制原理
2021/06/04 Redis
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python