一个教做网页的网站,秦皇岛高端网站设计,濮阳佳杰网站建设巧用不对称,上海将打造五大未来产业集群表单包含输入框#xff0c;单选框#xff0c;下拉选择#xff0c;多选框等用户输入的组件。输入表单#xff0c;您可以收集、验证和提交数据。 经典表单
最基础的表单包括各种输入表单项#xff0c;比如input、select、radio、checkbox等。 在每一个form组件中#xff0…表单包含输入框单选框下拉选择多选框等用户输入的组件。输入表单您可以收集、验证和提交数据。 经典表单
最基础的表单包括各种输入表单项比如input、select、radio、checkbox等。 在每一个form组件中需要一个form-item 字段作为输入项的容器用于获取值与验证值。 templateel-form :modelform label-widthauto stylemax-width: 600pxel-form-item labelActivity nameel-input v-modelform.name //el-form-itemel-form-item labelActivity zoneel-select v-modelform.region placeholderplease select your zoneel-option labelZone one valueshanghai /el-option labelZone two valuebeijing //el-select/el-form-itemel-form-item labelActivity timeel-col :span11el-date-pickerv-modelform.date1typedateplaceholderPick a datestylewidth: 100%//el-colel-col :span2 classtext-centerspan classtext-gray-500-/span/el-colel-col :span11el-time-pickerv-modelform.date2placeholderPick a timestylewidth: 100%//el-col/el-form-itemel-form-item labelInstant deliveryel-switch v-modelform.delivery //el-form-itemel-form-item labelActivity typeel-checkbox-group v-modelform.typeel-checkbox valueOnline activities nametypeOnline activities/el-checkboxel-checkbox valuePromotion activities nametypePromotion activities/el-checkboxel-checkbox valueOffline activities nametypeOffline activities/el-checkboxel-checkbox valueSimple brand exposure nametypeSimple brand exposure/el-checkbox/el-checkbox-group/el-form-itemel-form-item labelResourcesel-radio-group v-modelform.resourceel-radio valueSponsorSponsor/el-radioel-radio valueVenueVenue/el-radio/el-radio-group/el-form-itemel-form-item labelActivity formel-input v-modelform.desc typetextarea //el-form-itemel-form-itemel-button typeprimary clickonSubmitCreate/el-buttonel-buttonCancel/el-button/el-form-item/el-form
/templatescript langts setup
import { reactive } from vue// do not use same name with ref
const form reactive({name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: ,
})const onSubmit () {console.log(submit!)
}
/script 提示 W3C标准定义 当一个表单中只有一个单行文本输出字段时浏览器应当将在此字段中按下Enter(回车键的行为视为提交表单的请求。如果希望阻止这一默认行为可以在el-form标签上添加submit.prevent。 行内表单
当垂直方向空间受限且表单较简单时可以在一行内放置表单。通过设置 inline 属性为 true 可以让表单域变为行内的表单域。 对齐方式
根据设计情况来选择最佳的标签对齐方式。您可以分别设置el-form-item 的 label-position. 如果值为空则会使用el-form 的 label-position。通过设置 label-position 属性可以改变表单域标签的位置可选值为 top、left当设为 top 时标签会置于表单域的顶部。 可以绑定在 el-form标签上。 也可以单独绑定在el-form-item标签上。 const labelPosition ref(top)
const itemLabelPosition ref() 表单校验
Form组件允许您验证用户的输入是否符合规范来帮助你找到和纠正错误。
Form 组件提供了表单验证的功能只需为 rules 属性传入约定的验证规则并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 ref用来定义这个el-form表单:rules用来绑定所需要的规则具体可见js代码。 prop属性用于rules中对应数据规则的匹配注意prop中的值需要和v-model中的值对应例如prop”namev-model为ruleForm.name否则会出现输入值提示没有输入值的现象。 这是表单规则对应的js代码。可根据自身需求进行修改。
const ruleFormRef ref()const rules reactive({name: [{ required: true, message: Please input Activity name, trigger: blur },{ min: 3, max: 5, message: Length should be 3 to 5, trigger: blur },],region: [{required: true,message: Please select Activity zone,trigger: change,},],count: [{required: true,message: Please select Activity count,trigger: change,},],
})const submitForm async (formEl) {if (!formEl) returnawait formEl.validate((valid, fields) {if (valid) {console.log(submit!)} else {console.log(error submit!, fields)}})
}自定义校验规则
这个例子中展示了如何使用自定义规则来完成密码的二次验证。本例还使用 status-icon 属性为输入框添加了表示校验结果的反馈图标。 自定义校验规则同样需要写ref:rules绑定以及prop属性。 在js代码中rules里用了validator后面的参数为自定义校验的方法。 注意自定义的验证回调函数必须被调用即要写callback()。
const ruleFormRef ref()const rules reactive({pass: [{ validator: validatePass, trigger: blur }],checkPass: [{ validator: validatePass2, trigger: blur }],age: [{ validator: checkAge, trigger: blur }],
})const checkAge (rule, value, callback) {if (!value) {return callback(new Error(Please input the age))}setTimeout(() {if (!Number.isInteger(value)) {callback(new Error(Please input digits))} else {if (value 18) {callback(new Error(Age must be greater than 18))} else {callback()}}}, 1000)
}const validatePass (rule, value, callback) {if (value ) {callback(new Error(Please input the password))} else {if (ruleForm.checkPass ! ) {if (!ruleFormRef.value) returnruleFormRef.value.validateField(checkPass)}callback()}
}
const validatePass2 (rule, value, callback) {if (value ) {callback(new Error(Please input the password again))} else if (value ! ruleForm.pass) {callback(new Error(Two inputs dont match!))} else {callback()}
} 添加/删除表单项
除了一次通过表单组件上的所有验证规则外您也可以动态地通过验证规则或删除单个表单字段的规则。 这里主要是通过New domain来创建新的表单并为其添加验证规则跟之前的表单验证一样只不过这侧我们把 :rules写在了el-form-item里。 这里使用了循环为每个通过按钮生成的表单添加了对应的label 和 prop对应规则。 这个为添加新的表单和移除新的表单的js方法。
const addDomain () {dynamicValidateForm.domains.push({key: Date.now(),value: ,})
}const removeDomain (item) {const index dynamicValidateForm.domains.indexOf(item)if (index ! -1) {dynamicValidateForm.domains.splice(index, 1)}
} 数字类型验证
数字类型的验证需要在 v-model处加上 .number 的修饰符这是Vue自身提供的用于将绑定值转化为number类型的修饰符。 尺寸控制
表单中所有子组件都继承了该表单的 size 属性。 同样form-item 也有一个 size 属性。 如果希望某个表单项或某个表单组件的尺寸不同于Form上的 size 属性直接为这个表单项或表单组件设置自己的size属性即可。 const size ref(default) 无障碍
当在 el-form-item 内只有一个输入框或相关的控制部件如选择或复选框表单项的标签将自动附加在那个输入框上。如果 el-form-item 内有多个input则表单会被设置成 WAI-ARIA 组的role。 在这种情况下需要手动给每个 input 指定访问标签。 const formAccessibility reactive({fullName: ,firstName: ,lastName: ,
})
