可信网站认证 代理商北辰天津网站建设

可信网站认证 代理商,北辰天津网站建设,网页设计重要是什么,aws 搭建wordpress目录前言1. 基本知识2. Demo3. 实战前言 Java基本知识#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等#xff08;超全#xff09;【Java项目】实战CRUD的功能整理#xff08;持续更新#xff09; 奔着从实战中出发剖析基本知识 1. 基本知识 a-…目录前言1. 基本知识2. Demo3. 实战前言Java基本知识java框架 零基础从入门到精通的学习路线 附开源项目面经等超全【Java项目】实战CRUD的功能整理持续更新奔着从实战中出发剖析基本知识1. 基本知识a-form-item 是 Ant Design Vue 表单组件 中用于给控件加 label标签设置 label 和表单控件的布局labelCol、wrapperCol处理验证状态success/error/warning 等配合 v-decorator 来实现 表单数据管理 校验常用属性最重要属性说明label表单项左侧标题labelCollabel 的布局栅格宽度wrapperCol控件区域布局help自定义帮助信息validateStatus验证状态success / warning / error / validatingrequired是否标记为必填只显示红 *不代表校验规则extra额外说明文字简易的例子a-form-itemlabel用户名:labelCol{ span: 5 }:wrapperCol{ span: 16 }validateStatuserrorhelp用户名不能为空2. Demo常用的Demo写法如下输入用户名、手机号校验必填 正则提交收集数据自动显示错误提示templatea-form:formformsubmit.preventhandleSubmit!-- 用户名 --a-form-itemlabel用户名:labelCollabelCol:wrapperColwrapperCola-inputplaceholder请输入用户名v-decorator[username, { rules: [ { required: true, message:用户名不能为空}, { min: 3, message:至少 3 个字符} ] } ]//a-form-item!-- 手机号 --a-form-itemlabel手机号:labelCollabelCol:wrapperColwrapperCola-inputplaceholder请输入手机号v-decorator[mobile, { rules: [ { required: true, message:请输入手机号}, { pattern: /^1\d{10}$/, message:手机号格式不正确} ] } ]//a-form-item!-- 提交按钮 --a-form-item:wrapperCol{ span: 16, offset: 5 }a-buttontypeprimaryhtml-typesubmit:loadingloading提交/a-button/a-form-item/a-form/templatescriptexportdefault{name:UserFormDemo,beforeCreate(){this.formthis.$form.createForm(this);// 必须创建 form},data(){return{loading:false,// label 和控件 的布局labelCol:{span:5},wrapperCol:{span:16},};},methods:{handleSubmit(){this.form.validateFields((err,values){if(!err){console.log(提交的数据,values);this.$message.success(提交成功);}});}}};/scriptstylescoped/style 结构分析核心写法1️⃣ 绑定 formbeforeCreate(){this.formthis.$form.createForm(this);} 这是 AntD Vue2 的黑科技必须写。2️⃣ 使用表单布局labelCol wrapperCollabelCol:{span:5},wrapperCol:{span:16},让 label 占 5 列控件占 16 列。3️⃣ v-decorator 管理字段 校验规则标准语法v-decorator[字段名, 配置规则]示例v-decorator[username,{rules:[{required:true,message:不能为空}]}]4️⃣ 提交表单统一校验this.form.validateFields((err,values){if(!err){console.log(values)}})⚡ 不需要手写错误提示a-form-item 会自动显示3. 实战项目中实战的代码模块经典结构如下a-form-itemlabel用户姓名:labelCollabelCol:wrapperColwrapperCola-inputplaceholder请输入用户姓名v-decorator.trim[username, validatorRules.username]//a-form-itemDemo 使用的是labelCol: { xs: { span: 24 }, sm: { span: 5 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 } }在小屏label 和控件都占 24 列换行在大屏label 占 5内容占 16共 24 栅格 这是 AntD 的 响应式栅格布局方式validatorRules.username校验规则示例代码里面是username: { rules: [ { required: true, message: 请输入用户名称! } ] }常见校验如下规则示例required{ required: true }min/max 长度{ min: 3, max: 20 }正则 pattern{ pattern: /^[A-Za-z]$/ }自定义校验{ validator: this.myValidator }