做会计要看什么关注什么网站,centos wordpress建站,茌平网站建设电话,无锡找做网站Form 表单#xff1a;日常业务中很常见#xff0c;由输入框、选择器、单选框、多选框等控件组成#xff0c;用以收集、校验、提交数据#xff0c;常见于表单请求、登录#xff0c;数据校验等业务操作中 1.如何使用#xff1f;
包括各种表单项#xff0c;比如输入框、选… Form 表单日常业务中很常见由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据常见于表单请求、登录数据校验等业务操作中 1.如何使用
包括各种表单项比如输入框、选择器、开关、单选框、多选框等。
/*在 Form 组件中每一个表单域由一个 Form-Item 组件构成表单域中可以放置各种类型的表单控件包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker*/el-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-item label即时配送el-switch v-modelform.delivery/el-switch/el-form-itemel-form-item label活动性质el-checkbox-group v-modelform.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源el-radio-group v-modelform.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式el-input typetextarea v-modelform.desc/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item
/el-form
scriptexport default {data() {return {form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: }}},methods: {onSubmit() {console.log(submit!);}}}
/script W3C 标准中有如下规定 When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 即当一个 form 元素中只有一个输入框时在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为可以在 el-form 标签上添加 submit.native.prevent。 2.行内表单
当垂直方向空间受限且表单较简单时可以在一行内放置表单。
设置 inline 属性可以让表单域变为行内的表单域el-form :inlinetrue :modelformInline classdemo-form-inlineel-form-item label审批人el-input v-modelformInline.user placeholder审批人/el-input/el-form-itemel-form-item label活动区域el-select v-modelformInline.region placeholder活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item
/el-form
scriptexport default {data() {return {formInline: {user: ,region: }}},methods: {onSubmit() {console.log(submit!);}}}
/script 3.对齐方式
根据具体目标和制约因素选择最佳的标签对齐方式。
//通过设置 label-position 属性可以改变表单域标签的位置可选值为 top、left当设为 top 时标签会置于表单域的顶部el-radio-group v-modellabelPosition sizesmallel-radio-button labelleft左对齐/el-radio-buttonel-radio-button labelright右对齐/el-radio-buttonel-radio-button labeltop顶部对齐/el-radio-button
/el-radio-group
div stylemargin: 20px;/div
el-form :label-positionlabelPosition label-width80px :modelformLabelAlignel-form-item label名称el-input v-modelformLabelAlign.name/el-input/el-form-itemel-form-item label活动区域el-input v-modelformLabelAlign.region/el-input/el-form-itemel-form-item label活动形式el-input v-modelformLabelAlign.type/el-input/el-form-item
/el-form
scriptexport default {data() {return {labelPosition: right,formLabelAlign: {name: ,region: ,type: }};}}
/script 4.表单验证
在防止用户犯错的前提下尽可能让用户更早地发现并纠正错误
//Form 组件提供了表单验证的功能只需要通过 rules 属性传入约定的验证规则并将 Form-Item 的 prop 属性设置为需校验的字段名即可。el-form :modelruleForm :rulesrules refruleForm label-width100px classdemo-ruleFormel-form-item label活动名称 propnameel-input v-modelruleForm.name/el-input/el-form-itemel-form-item label活动区域 propregionel-select v-modelruleForm.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间 requiredel-col :span11el-form-item propdate1el-date-picker typedate placeholder选择日期 v-modelruleForm.date1 stylewidth: 100%;/el-date-picker/el-form-item/el-colel-col classline :span2-/el-colel-col :span11el-form-item propdate2el-time-picker placeholder选择时间 v-modelruleForm.date2 stylewidth: 100%;/el-time-picker/el-form-item/el-col/el-form-itemel-form-item label即时配送 propdeliveryel-switch v-modelruleForm.delivery/el-switch/el-form-itemel-form-item label活动性质 proptypeel-checkbox-group v-modelruleForm.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源 propresourceel-radio-group v-modelruleForm.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式 propdescel-input typetextarea v-modelruleForm.desc/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)立即创建/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item
/el-form
scriptexport default {data() {return {ruleForm: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: },rules: {name: [{ required: true, message: 请输入活动名称, trigger: blur },{ min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur }],region: [{ required: true, message: 请选择活动区域, trigger: change }],date1: [{ type: date, required: true, message: 请选择日期, trigger: change }],date2: [{ type: date, required: true, message: 请选择时间, trigger: change }],type: [{ type: array, required: true, message: 请至少选择一个活动性质, trigger: change }],resource: [{ required: true, message: 请选择活动资源, trigger: change }],desc: [{ required: true, message: 请填写活动形式, trigger: blur }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
/script 5.自定义校验规则
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。el-form :modelruleForm status-icon :rulesrules refruleForm label-width100px classdemo-ruleFormel-form-item label密码 proppassel-input typepassword v-modelruleForm.pass autocompleteoff/el-input/el-form-itemel-form-item label确认密码 propcheckPassel-input typepassword v-modelruleForm.checkPass autocompleteoff/el-input/el-form-itemel-form-item label年龄 propageel-input v-model.numberruleForm.age/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)提交/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item
/el-form
scriptexport default {data() {var checkAge (rule, value, callback) {if (!value) {return callback(new Error(年龄不能为空));}setTimeout(() {if (!Number.isInteger(value)) {callback(new Error(请输入数字值));} else {if (value 18) {callback(new Error(必须年满18岁));} else {callback();}}}, 1000);};var validatePass (rule, value, callback) {if (value ) {callback(new Error(请输入密码));} else {if (this.ruleForm.checkPass ! ) {this.$refs.ruleForm.validateField(checkPass);}callback();}};var validatePass2 (rule, value, callback) {if (value ) {callback(new Error(请再次输入密码));} else if (value ! this.ruleForm.pass) {callback(new Error(两次输入密码不一致!));} else {callback();}};return {ruleForm: {pass: ,checkPass: ,age: },rules: {pass: [{ validator: validatePass, trigger: blur }],checkPass: [{ validator: validatePass2, trigger: blur }],age: [{ validator: checkAge, trigger: blur }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
/script6. 动态增减表单项
//除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则el-form :modeldynamicValidateForm refdynamicValidateForm label-width100px classdemo-dynamicel-form-itempropemaillabel邮箱:rules[{ required: true, message: 请输入邮箱地址, trigger: blur },{ type: email, message: 请输入正确的邮箱地址, trigger: [blur, change] }]el-input v-modeldynamicValidateForm.email/el-input/el-form-itemel-form-itemv-for(domain, index) in dynamicValidateForm.domains:label域名 index:keydomain.key:propdomains. index .value:rules{required: true, message: 域名不能为空, trigger: blur}el-input v-modeldomain.value/el-inputel-button click.preventremoveDomain(domain)删除/el-button/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(dynamicValidateForm)提交/el-buttonel-button clickaddDomain新增域名/el-buttonel-button clickresetForm(dynamicValidateForm)重置/el-button/el-form-item
/el-form
scriptexport default {data() {return {dynamicValidateForm: {domains: [{value: }],email: }};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},removeDomain(item) {var index this.dynamicValidateForm.domains.indexOf(item)if (index ! -1) {this.dynamicValidateForm.domains.splice(index, 1)}},addDomain() {this.dynamicValidateForm.domains.push({value: ,key: Date.now()});}}}
/script
7.数字类型验证 数字类型的验证需要在 v-model 处加上 .number 的修饰符这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。 el-form :modelnumberValidateForm refnumberValidateForm label-width100px classdemo-ruleFormel-form-itemlabel年龄propage:rules[{ required: true, message: 年龄不能为空},{ type: number, message: 年龄必须为数字值}]el-input typeage v-model.numbernumberValidateForm.age autocompleteoff/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(numberValidateForm)提交/el-buttonel-button clickresetForm(numberValidateForm)重置/el-button/el-form-item
/el-form
scriptexport default {data() {return {numberValidateForm: {age: }};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
/script嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零不会继承 el-form 的 label-width。如果需要可以为其单独设置 label-width 属性。 8.表单内组件尺寸控制 通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。 //如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的size属性直接为这个表单项或表单组件设置自己的size即可。el-form refform :modelsizeForm label-width80px sizeminiel-form-item label活动名称el-input v-modelsizeForm.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelsizeForm.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-picker typedate placeholder选择日期 v-modelsizeForm.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelsizeForm.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-item label活动性质el-checkbox-group v-modelsizeForm.typeel-checkbox-button label美食/餐厅线上活动 nametype/el-checkbox-buttonel-checkbox-button label地推活动 nametype/el-checkbox-buttonel-checkbox-button label线下主题活动 nametype/el-checkbox-button/el-checkbox-group/el-form-itemel-form-item label特殊资源el-radio-group v-modelsizeForm.resource sizemediumel-radio border label线上品牌商赞助/el-radioel-radio border label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item sizelargeel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item
/el-formscriptexport default {data() {return {sizeForm: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: }};},methods: {onSubmit() {console.log(submit!);}}};
/script Form表单组件的大致内容就是这些若想深入浅出可以前往表单组件
