ant Design 表单以及表单验证

今天用ant Design写了个修改密码的功能，随便记录一下

效果图

html代码

<div><a-modal v-model="visible" title="修改密码" on-ok="handleOk"><template slot="footer"><a-button key="back" @click="handleCancel">取消</a-button><a-button key="submit" type="primary" :loading="loading" :disabled="hasErrors(form.getFieldsError())" @click="handleOk">提交</a-button></template><!--      下面的表单用form 表单--><a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit"><a-form-item label="账号"><a-input size="large"placeholder="请输入账号"allow-clearv-decorator="['username',validatorRules.username]"><a-icon slot="prefix"type="user":style="{ color: 'rgba(0,0,0,.25)' }" /></a-input></a-form-item><a-form-item label="密码"><a-input-passwordsize="large"placeholder="请输入密码"allow-clearv-decorator="['password',validatorRules.password]"><a-icon slot="prefix"type="lock":style="{ color: 'rgba(0,0,0,.25)' }" /></a-input-password></a-form-item><a-form-item label="新密码"><a-input-passwordsize="large"placeholder="请输入新密码"allow-clearv-decorator="['newPassword1',validatorRules.newPassword1]"><a-icon slot="prefix"type="lock":style="{ color: 'rgba(0,0,0,.25)' }" /></a-input-password></a-form-item><a-form-item label="确认新密码"><a-input-passwordsize="large"placeholder="请输入新密码"allow-clearv-decorator="['newPassword2',validatorRules.newPassword2]"><a-icon slot="prefix"type="lock":style="{ color: 'rgba(0,0,0,.25)' }" /></a-input-password></a-form-item></a-form></a-modal></div>

js代码

export default {name: 'ModifyPassword',data() {return {loading: false,visible: false,form: this.$form.createForm(this),// 每个控件的验证规则validatorRules: {username: {rules: [{required: true, message: '请输入用户名!'}, {validator: this.validatePass,tirgger: 'change'}]},password: {rules: [{required: true, message: '请输入密码!'},{validator: this.validatePass,tirgger: 'change'}]},newPassword1: {rules: [{required: true, message: '请输新入密码!'},{validator: this.validatePass1,tirgger: 'change'}]},newPassword2: {rules: [{required: true, message: '请输新入密码!'},{validator: this.validatePass2,tirgger: 'change'}]},},};},methods: {handleSubmit(e) {console.log('这里')e.preventDefault();this.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);}});},// 输入框长度验证方法validatePass(rule, value, callback){if (value.length<6 || value.length>12) {callback(new Error('长度应为6到12位'))}callback()},validatePass1(rule, value, callback){if (value.length<6 || value.length>12) {callback(new Error('长度应为6到12位'))}else// 验证新密码不能与旧密码一致if(this.form.getFieldValue('newPassword1')==this.form.getFieldValue('password')){callback(new Error('新密码不能与旧密码一致'))}callback()},validatePass2(rule, value, callback){// 验证输入长度if (value.length<6 || value.length>12) {callback(new Error('长度应为6到12位'))}else// 验证两次输入的新密码是否一致if(this.form.getFieldValue('newPassword1')!=this.form.getFieldValue('newPassword2')){callback(new Error('输入的新密码不一致'))}callback()},// 所有输入框正确输入提交按钮才能操作hasErrors(fieldsError) {return Object.keys(fieldsError).some(field => fieldsError[field]);},// 开启弹窗showModal() {this.visible = true;},// 关闭弹窗handleCancel(e) {console.log(e)this.visible = false;},// 提交更改密码操作（再这里面接口返回数据）handleOk(e) {console.log(e)this.loading = true;setTimeout(() => {this.visible = false;this.loading = false;}, 3000);},},
};

主要用到了几个表单属性，和几个api

form为一组控件，username password newPassword1 newPassword2这四个为单个控件被form包含

提交按钮处用到

form.getFieldsError() ：获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error

判断所有的输入框验证是否通过

validator 为自定义验证规则（有一些简单的规则可以用ant 自带的）

form.getFieldValue（‘控件名称’）：获取一个输入控件的值

ant Design 表单以及表单验证相关推荐

Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
ant design vue input change_vue 表单
文档:https://cn.vuejs.org/v2/guide/forms.html#ad 基本用法使用vue脚手架安装Nodejs 安装yarn:https://yarn.bootcss.co ...
react-hooks+Ant Design Mobile中的自定义表单验证
Ant Design Mobile中的表单校验将validator放在 rules 对象中 <Form.Itemname='uName'label='姓名'requiredrules={[{r ...
Ant Design of Vue中a-form-model多行表单对齐和验证
表单是前端人员不得不面对的一个组件,如何画的对齐好看,验证成功呢? 1.代码: (1)布局: html+css,当然肯定使用ant的组件注意:单位我们放在suffix里面,如suffix=" ...
实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
ant design form表单的时间处理
ant design form表单的时间处理用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢? 可以在表单中使用如下代码: import { DatePicker } ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
Ant Design Vue 如何获form表单里数据并给 v-decorator绑定的数据重新赋值
最近在用ant design vue 做项目遇到了一下坑比如 v-decorator 可以做数据绑定与v-model 不同的是给 form 表单赋值 v-model 的值是双向绑定的如 ...

ant Design 表单以及表单验证

html代码

js代码

ant Design 表单以及表单验证相关推荐

最新文章

热门文章