建设通类型的网站网上怎么推广产品
1. 完整代码
在rules中，加validator字段，定义自己的校验规则，为一个函数，必须调用callback(无论校验是否成功，调用callback函数)
<template><div class="addAccount"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="auto"><el-form-item label="中台UID" prop="uid"><el-inputtype="textarea"v-model="ruleForm.uid"style="width: 600px":rows="3"placeholder="请输入中台uid"></el-input></el-form-item><el-form-item><el-button type="primary" size="small" @click="toAddPlenty('ruleForm')">批量创建工单</el-button></el-form-item></el-form></div>
</template>
<script>
export default {data() {return {ruleForm: {uid: "",},rules: {uid: [{// 表单校验之后，不显示星号——必须加required：true才可以required: true,validator: (rule, value, callback) => {const ipReg = /^(\d+((,\d+)*)),?$/;const error = value.length && value.split(',').some(ip => ip && !ipReg.test(ip))if (value === "") {callback(new Error('请输入中台uid，多个uid用英文","分隔'));} else {if (error) {callback('请输入正确的uid，多个uid用英文","分隔')}callback();}},trigger: "blur",},],},};},methods: {toAddPlenty(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert("输入格式正确!");} else {console.log("error !!");return false;}});},},
};
</script>
2. 相关问题解释
- 校验规则给
el-form加rules属性，对应值在data中返回，为一个对象。 rules对象的各个键为el-form-item中的prop对应字段名，例如：
<el-form :model="form" :rules="rules" ref="ruleForm"><el-form-item prop="id"><el-input v-model="form.id"></el-input></el-form-item>
</el-form>data(){return {rules: {id: [{required: true,validator: (rule,value,callback)=>{},trigger:"blur"}]}}
}
validate函数在任意一表单项被校验后触发
例如以上写的当触发blur事件，会触发validate函数，校验表单的prop值，代码如下：
// 这里refs取 el-form , 参数valid为true则校验成功 为false则失败，需重新输入相关表单内容
this.$refs['ruleForm'].validate((valid)=>{})
3. 表单校验生效之后不显示label前的小星号问题
在自定义校验规则中，加上required: true，不加就不会显示label前面的红色星号。