nz-input限制输入只能是中文

原文链接:https://www.longkui.site/program/frontend/nz-input/5399/

一个简单需求,要求用户输入的内容只能是中文,以前的需求都是只能输入数字,这次需求改成了要求只输入中文。

环境:angular+ng-zorro(7.5.x)

HTML:

<input nz-input type=“text”
(blur)=“change(data)”

TS:

change(data){
let res=data.replace( /[^\u4e00-\u9fa5]/g,‘’,)
console.log(res)
}
其实原理很简单,用正则表达式把不是中文的替换掉,留下只有中文的部分即可。

在使用 TypeScript 编写上述表单时,你可以这样写: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-search-form', templateUrl: './search-form.component.html', styleUrls: ['./search-form.component.css'] }) export class SearchFormComponent { q = { ajmc: '', ajbh: '', }; onSubmit() { // 处理表单提交事件 } onReset() { this.q.ajmc = ''; this.q.ajbh = ''; } } ``` 在这个例子中,我们使用了 Angular 框架来构建组件。在组件类中,我们定义了一个 `q` 对象来存储表单中的数据。当提交表单时,我们可以在 `onSubmit` 方法中处理表单提交事件,当重置表单时,我们可以在 `onReset` 方法中将 `q` 对象中的属性值设置为空字符串,从而实现表单重置的功能。 在 HTML 文件中,你可以这样写: ```html <form nz-form [nzLayout]="'inline'" class="search-form" (ngSubmit)="onSubmit()"> <nz-row> <nz-col> <nz-form-item> <nz-form-label>  案件名称</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" [(ngModel)]="q.ajmc" name="ajmc" placeholder="请输入案件名称"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <nz-form-item> <nz-form-label>案件编号</nz-form-label> <nz-form-control> <nz-input-group> <input nz-input width="200px" [(ngModel)]="q.ajbh" name="ajbh" placeholder="请输入案件编号"> </nz-input-group> </nz-form-control> </nz-form-item> </nz-col> <nz-col> <button style="margin-top: 3px;" nz-button type="submit" [nzType]="'primary'">查询</button> <button nz-button type="button" class="mx-sm" (click)="onReset()">重置</button> </nz-col> </nz-row> </form> ``` 在这个例子中,我们使用 `(ngSubmit)` 指令来监听表单的提交事件,并在事件发生时调用组件类中的 `onSubmit` 方法。在重置按钮中,我们使用 `(click)` 指令来监听按钮的点击事件,并在事件发生时调用组件类中的 `onReset` 方法。注意,重置按钮的类型应该为 `type="button"`,这样可以避免表单的提交事件被触发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值