企业官网建设流程全解析

1、基础用法

1、form组件需要传入验证规则，rules属性；rules属性用于设置表单验证规则，类型为object；可以设置一个或多个校验规则；
2、form-item组件需要设置prop属性；form表单域 model 字段（如下例中formValue对象的name属性），在使用 validate、resetFields 方法的情况下，该属性是必填的；
3、rules中每个键名对应一个表单项字段名，prop属性名与rules中的键名要一一对应；

2、rules规则详解

• required：标识该字段是否为必填，类型Boolean；true代表必填，false为非必填；一般只有为true时才设置；
• type：指定校验的数据类型，常用的有string、number、email、url、date；
• message：校验失败时的错误提示；
• trigger：触发校验的时机；类型：string或array，值：‘blur’ | ‘change’；
• min和max：字符串长度或数值范围，只有在type为string或number时有效；
• pattern：复合条件得正则；
• 自定义校验：通过validator属性定义自定义校验函数；

3、基础非空、数字、长度、日期、email校验

<template><divclass="index-main"><el-formref="ruleFormRef":model="formValue":rules="formRules"><el-form-itemlabel="名字"prop="name"><el-input v-model="formValue.name"placeholder="请输入名字"></el-input></el-form-item><el-form-itemlabel="年龄"prop="age"><el-input v-model.number="formValue.age"placeholder="请输入年龄":maxlength="maxlength"></el-input></el-form-item><el-form-itemlabel="区域"prop="region"><el-select v-model="formValue.region"placeholder="请选择区域"><el-optionlabel="上海"value="1"></el-option><el-optionlabel="北京"value="2"></el-option></el-select></el-form-item><el-form-item><el-button @click="submitHandle">提交</el-button><el-button @click="resetHandle">重置</el-button></el-form-item></el-form></div></template>

<script setup>import{ref, reactive, computed, watch, watchEffect,onMounted,nextTick,isRef}from'vue';const formValue=ref({name:'', age:'', region:''});const ruleFormRef=ref(null);const formRules=ref({name:[{required:true, message:'名字不能为空',trigger:'blur'},{min:3, max:5, message:'长度在 3 到 5 个字符', trigger:['blur','change']}], age:[{required:true, type:'integer', message:'年龄不能为空且只能为整型数字',trigger:['blur','change']},{min:1, max:3, message:'长度在 1 到 3 个字符', trigger:['blur','change']}], region:[{required:true, message:'区域必选',trigger:'change'}]});</script>

备注：el-input如果在rules中设置min和max只能在输入或值改变时触发message提示，并不能限制el-input的输入长度，如需限制则需在el-input中设置maxlength和minlength属性，设置maxlength超出长度则不能进行输入；

4、正则校验

4.1、rules规则正则校验

<template><divclass="index-main"><el-formref="ruleFormRef":model="formValue":rules="formRules"><el-form-itemlabel="年龄"prop="age"><el-input v-model.number="formValue.age"placeholder="请输入年龄":maxlength="3"></el-input></el-form-item><el-form-item><el-button @click="submitHandle">提交</el-button><el-button @click="resetHandle">重置</el-button></el-form-item></el-form></div></template><script setup>import{ref, reactive, computed, watch, watchEffect,onMounted,nextTick,isRef}from'vue';const formValue=ref({age:''});const ruleFormRef=ref(null);const formRules=ref({age:[{required:true, message:'年龄不能为空',trigger:['blur','change']},{min:1, max:3, message:'长度在 1 到 3 个字符', trigger:['blur','change']},{pattern: /^[1-9]\d*$/, message:'非0开头正整数',trigger:['blur','change']}],});/* /^\d+$/ ：此正则可0开头 */</script>

备注：rules的正则校验，只会校验，不会限制input输入，不满足条件就会错误提示；如需直接限制input输入，则需采取另外的方式；

4.2、input输入正则校验（不符合正则条件会被替换为空字符串）

//input输入限制<el-input v-model="formValue.floatNum"placeholder="请输入"oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>

注意：使用oninput绑定，此方法会导致中文输入法情况下v-model和value不一致

//限制只能输入2-5位正整数<el-input v-model="formValue.floatNum"placeholder="请输入"@input="formValue.floatNum = formValue.floatNum.replace(/^(0+)|[^\d]+/g,'')":maxlength="5"></el-input>const formRules=ref({floatNum:[{required:true, message:'不能为空',trigger:['blur','change']},{min:2, max:5, message:'长度在 2 到 5 个字符', trigger:['blur','change']}],});

<el-input v-model="formValue.floatNum"placeholder="请输入"@input="floatNumInput"></el-input>functionfloatNumInput(value){nextTick(()=>{formValue.value.floatNum=value.replace(/^(0+)|[^\d]+/g,'');})}

4.3、自定义校验规则

<template><divclass="index-main"><el-formref="ruleFormRef":model="formValue":rules="formRules"><el-form-itemlabel="数字"prop="num"><el-input v-model.number="formValue.num"placeholder="请输入非0开头2-5位数字"></el-input></el-form-item></el-form></div></template><script setup>import{ref, reactive, computed, watch, watchEffect,onMounted,nextTick,isRef}from'vue';const formValue=ref({num:[{required:true, message:'数字不能为空',trigger:['blur','change']},{validator: checkAge, trigger:'blur'}],});const ruleFormRef=ref(null);const formRules=ref({});functioncheckAge(rule,value,callback){if(!value){callback(new Error('不能为空'));}else{//校验非0开头数字 const regExp=/^[1-9][0-9]{1,5}\d*$/;if(!regExp.test(value)){callback(new Error('请输入非零开头2-5位正数字'));}else{callback();}}}</script>

4.4、响应式监听rules

vue2设置方式

<template><el-formref="formRef":model="formValue":rules="formRrules"label-width="80px"><el-form-itemlabel="审核结果"prop="reviewStatus"><el-radio-group v-model="formValue.reviewStatus"><el-radiolabel="1"value="1">审核通过</el-radio><el-radiolabel="0"value="0">审核驳回</el-radio></el-radio-group></el-form-item><el-form-itemlabel="审核备注"prop="reviewRemark"><el-inputtype="textarea"v-model="formValue.reviewRemark"></el-input></el-form-item></el-form></template><script>exportdefault{data(){return{formValue:{reviewStatus:'1', reviewRemark:''}}}, computed:{upgradeRrules(){letrules={reviewStatus:[{required: true, message:'请选择审核结果', trigger:'change'}], reviewRemark:[{required:this.formValue.reviewStatus=='0', message:'请输入审核备注', trigger:'blur'}]}returnrules}}, methods:{}}</script>

vue3设置方式

<template><el-formref="formRef":model="formValue":rules="formRrules"label-width="80px"><el-form-itemlabel="审核结果"prop="reviewStatus"><el-radio-group v-model="formValue.reviewStatus"><el-radiolabel="1"value="1">审核通过</el-radio><el-radiolabel="0"value="0">审核驳回</el-radio></el-radio-group></el-form-item><el-form-itemlabel="审核备注"prop="reviewRemark"><el-inputtype="textarea"v-model="formValue.reviewRemark"></el-input></el-form-item></el-form></template><script setup>const formValue=ref({reviewStatus:'1', reviewRemark:''});const formRrules=computed(()=>{return{reviewStatus:[{required: true, message:'请选择审核结果', trigger:'change'}], reviewRemark:[{required:formValue.value.reviewStatus=='0', message:'请输入审核备注', trigger:'blur'}]}})</script>

5、动态设置表单

vue3写法

<template><el-formref="addFormRef":model="addForm"label-position="left"label-width="100px"><el-row v-for="(item,index) in addForm.dataList":key="item.id"><el-col :span="8"><el-form-itemlabel="订单数量":prop="'dataList[' + index + '].pricingQuantity'":rules="[ {required: true,message: '数量不能为空',trigger: 'blur'}, {validator: numValidateFunction, trigger: 'blur'} ]"><el-input v-model="item.pricingQuantity"placeholder="请输入数量"@input="numberInput($event, index, 'pricingQuantity')"@blur="numberTofixed(index, 'pricingQuantity')"><template#append>吨</template></el-input></el-form-item></el-col><el-col :span="8"><el-form-itemlabel="订单辅助数量":prop="'dataList[' + index + '].auxiliaryQuantity'":rules="[ {required: true,message: '辅助数量不能为空',trigger: 'blur'}, {validator: numValidateFunction, trigger: 'blur'} ]"><el-input v-model="item.auxiliaryQuantity"placeholder="请输入辅助数量"@input="numberInput($event, index, 'auxiliaryQuantity')"@blur="numberTofixed(index, 'auxiliaryQuantity')"><template#append>吨</template></el-input></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-itemlabel="备注信息"prop="remark"><el-input v-model="item.remark"maxlength="200"show-word-limittype="textarea"placeholder="请输入备注"></el-input></el-form-item></el-col></el-row></el-form></template><script setup>const addForm=ref({dataList:[]})const addFormRef=ref('')// input输入验证functionnumValidateFunction(rule, value, callback){if(value==0){callback(new Error('数量不能为0'))}else{callback()}}// 数字输入格式限制functionnumberInput(value, index, key){letresult=numberFixerFour(value)if(parseFloat(result)>=1000000000){result='999999999.0000'}addForm.value.dataList[index][key]=result}// 设置保留四位小数functionnumberTofixed(index, key){addForm.value.dataList[index][key]=addForm.value.dataList[index][key]? parseFloat(addForm.value.dataList[index][key]).toFixed(4):'0.0000';}//提交，函数声明语句创建函数，整个函数都会声明提前functionsubmitHandler(){addFormRef.value.validate((valid)=>{if(valid){console.log("验证通过");}else{console.log("验证失败");}})}//重置，函数表达式语句创建函数，只有变量声明提前 constresetForm=()=>{addFormRef.value.resetFields();}</script>

6、表单验证方法及重置方法的使用

注意：
1、 使用表单校验和重置方法时，el-form-item必须配置prop属性、
2、弹框中使用form方法时必须在表单DOM加载完成后调用，否则会报错；

vue3写法

<template><el-formref="addFormRef":model="addForm"label-position="left"label-width="100px"><el-form-itemprop="name"><el-input v-model="addForm.name"placeholder="请输入"></el-input></el-form-item>......<el-form-item><el-buttontype="primary"@click="submitHandler">提交</el-button><el-buttontype="primary"@click="restHandler">重置</el-button></el-form-item></el-form></template><script setup>const addForm=ref({id:"", name:""})const addFormRef=ref('');//提交，函数声明语句创建函数，整个函数都会声明提前functionsubmitHandler(){addFormRef.value.validate((valid)=>{if(valid){console.log("验证通过");}else{console.log("验证失败");}})}//重置，函数表达式语句创建函数，只有变量声明提前 constresetForm=()=>{addForm.value.id="";//form表单中不展示字段需手动重置 addFormRef.value.resetFields();}</script>