Element-plus表单总结

表单包含输入框，单选框，下拉选择，多选框等用户输入的组件。输入表单，您可以收集、验证和提交数据。

经典表单

最基础的表单包括各种输入表单项，好比input、select、radio、checkbox等。 在每一个form组件中，需要一个form-item 字段作为输入项的容器，用于获取值与验证值。

1. <template>
2.   <el-form :model="form" label-width="auto" style="max-width: 600px">
3.     <el-form-item label="Activity name">
4.       <el-input v-model="form.name" />
5.     </el-form-item>
6.     <el-form-item label="Activity zone">
7.       <el-select v-model="form.region" placeholder="please select your zone">
8.         <el-option label="Zone one" value="shanghai" />
9.         <el-option label="Zone two" value="beijing" />
10.       </el-select>
11.     </el-form-item>
12.     <el-form-item label="Activity time">
13.       <el-col :span="11">
14.         <el-date-picker
15.           v-model="form.date1"
16.           type="date"
17.           placeholder="Pick a date"
18.           style="width: 100%"
19.         />
20.       </el-col>
21.       <el-col :span="2" class="text-center">
22.         <span class="text-gray-500">-</span>
23.       </el-col>
24.       <el-col :span="11">
25.         <el-time-picker
26.           v-model="form.date2"
27.           placeholder="Pick a time"
28.           style="width: 100%"
29.         />
30.       </el-col>
31.     </el-form-item>
32.     <el-form-item label="Instant delivery">
33.       <el-switch v-model="form.delivery" />
34.     </el-form-item>
35.     <el-form-item label="Activity type">
36.       <el-checkbox-group v-model="form.type">
37.         <el-checkbox value="Online activities" name="type">
38.           Online activities
39.         </el-checkbox>
40.         <el-checkbox value="Promotion activities" name="type">
41.           Promotion activities
42.         </el-checkbox>
43.         <el-checkbox value="Offline activities" name="type">
44.           Offline activities
45.         </el-checkbox>
46.         <el-checkbox value="Simple brand exposure" name="type">
47.           Simple brand exposure
48.         </el-checkbox>
49.       </el-checkbox-group>
50.     </el-form-item>
51.     <el-form-item label="Resources">
52.       <el-radio-group v-model="form.resource">
53.         <el-radio value="Sponsor">Sponsor</el-radio>
54.         <el-radio value="Venue">Venue</el-radio>
55.       </el-radio-group>
56.     </el-form-item>
57.     <el-form-item label="Activity form">
58.       <el-input v-model="form.desc" type="textarea" />
59.     </el-form-item>
60.     <el-form-item>
61.       <el-button type="primary" @click="onSubmit">Create</el-button>
62.       <el-button>Cancel</el-button>
63.     </el-form-item>
64.   </el-form>
65. </template>
67. <script lang="ts" setup>
68. import { reactive } from 'vue'
70. // do not use same name with ref
71. const form = reactive({
72.   name: '',
73.   region: '',
74.   date1: '',
75.   date2: '',
76.   delivery: false,
77.   type: [],
78.   resource: '',
79.   desc: '',
80. })
82. const onSubmit = () => {
83.   console.log('submit!')
84. }
85. </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>标签上。 

1. const labelPosition = ref('top')
2. const itemLabelPosition = ref('')

复制代码

 表单校验

Form组件答应您验证用户的输入是否符合规范，来帮助你找到和纠正错误。
Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 

ref用来定义这个<el-form>表单，:rules用来绑定所需要的规则，具体可见js代码。

prop属性用于rules中对应数据规则的匹配，注意：prop中的值需要和v-model中的值对应，例如prop=”name"，v-model为="ruleForm.name"，否则会出现输入值提示没有输入值的征象。

这是表单规则对应的js代码。可根据自身需求进行修改。

1. const ruleFormRef = ref()
3. const rules = reactive({
4.   name: [
5.     { required: true, message: 'Please input Activity name', trigger: 'blur' },
6.     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
7.   ],
8.   region: [
9.     {
10.       required: true,
11.       message: 'Please select Activity zone',
12.       trigger: 'change',
13.     },
14.   ],
15.   count: [
16.     {
17.       required: true,
18.       message: 'Please select Activity count',
19.       trigger: 'change',
20.     },
21.   ],
22. })
25. const submitForm = async (formEl) => {
26.   if (!formEl) return
27.   await formEl.validate((valid, fields) => {
28.     if (valid) {
29.       console.log('submit!')
30.     } else {
31.       console.log('error submit!', fields)
32.     }
33.   })
34. }

复制代码

自定义校验规则

这个例子中展示了如何使用自定义规则来完成密码的二次验证。本例还使用 status-icon 属性为输入框添加了表示校验效果的反馈图标。

 自定义校验规则同样需要写ref，:rules绑定，以及prop属性。

在js代码中，rules里用了validator，背面的参数为自定义校验的方法。 注意自定义的验证回调函数必须被调用即要写callback()。

1. const ruleFormRef = ref()
3. const rules = reactive({
4.   pass: [{ validator: validatePass, trigger: 'blur' }],
5.   checkPass: [{ validator: validatePass2, trigger: 'blur' }],
6.   age: [{ validator: checkAge, trigger: 'blur' }],
7. })
11. const checkAge = (rule, value, callback) => {
12.   if (!value) {
13.     return callback(new Error('Please input the age'))
14.   }
15.   setTimeout(() => {
16.     if (!Number.isInteger(value)) {
17.       callback(new Error('Please input digits'))
18.     } else {
19.       if (value < 18) {
20.         callback(new Error('Age must be greater than 18'))
21.       } else {
22.         callback()
23.       }
24.     }
25.   }, 1000)
26. }
28. const validatePass = (rule, value, callback) => {
29.   if (value === '') {
30.     callback(new Error('Please input the password'))
31.   } else {
32.     if (ruleForm.checkPass !== '') {
33.       if (!ruleFormRef.value) return
34.       ruleFormRef.value.validateField('checkPass')
35.     }
36.     callback()
37.   }
38. }
39. const validatePass2 = (rule, value, callback) => {
40.   if (value === '') {
41.     callback(new Error('Please input the password again'))
42.   } else if (value !== ruleForm.pass) {
43.     callback(new Error("Two inputs don't match!"))
44.   } else {
45.     callback()
46.   }
47. }

复制代码

 
添加/删除表单项

除了一次通过表单组件上的所有验证规则外，您也可以动态地通过验证规则或删除单个表单字段的规则。

 这里主要是通过New domain来创建新的表单，并为其添加验证规则，跟之前的表单验证一样，只不过这侧我们把 :rules写在了<el-form-item>里。

这里使用了循环，为每个通过按钮生成的表单添加了对应的label 和 prop对应规则。 

这个为添加新的表单和移除新的表单的js方法。 

1. const addDomain = () => {
2.   dynamicValidateForm.domains.push({
3.     key: Date.now(),
4.     value: '',
5.   })
6. }
8. const removeDomain = (item) => {
9.   const index = dynamicValidateForm.domains.indexOf(item)
10.   if (index !== -1) {
11.     dynamicValidateForm.domains.splice(index, 1)
12.   }
13. }

复制代码

数字范例验证

数字范例的验证需要在 v-model处加上 .number 的修饰符，这是Vue自身提供的用于将绑定值转化为number范例的修饰符。

 

 
尺寸控制

表单中所有子组件都继续了该表单的 size 属性。 同样，form-item 也有一个 size 属性。 如果希望某个表单项或某个表单组件的尺寸差别于Form上的 size 属性，直接为这个表单项或表单组件设置自己的size属性即可。

 

1. const size = ref('default')

复制代码

 
无停滞

当在 el-form-item 内只有一个输入框（或相关的控制部件，如选择或复选框），表单项的标签将自动附加在谁人输入框上。如果 el-form-item 内有多个input，则表单会被设置成 WAI-ARIA 组的role。 在这种情况下，需要手动给每个 input 指定访问标签。

 

1. const formAccessibility = reactive({
2.   fullName: '',
3.   firstName: '',
4.   lastName: '',
5. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。