需求
分析
<el-form
:model="form"
status-icon
:rules="rules"
ref="formRef"
label-width="150px"
class="customForm"
size="small"
>
<el-form-item
label="姓名:"
prop="name"
>
<el-input
v-model.trim="form.name"
autocomplete="off"
>
</el-input>
</el-form-item>
<el-form-item
label="手机号:"
prop="phone"
>
<el-input
v-model.trim="form.phone"
autocomplete="off"
>
</el-input>
</el-form-item>
<el-form-item
label="邮箱:"
prop="email"
>
<el-input
v-model.trim="form.email"
autocomplete="off"
>
</el-input>
</el-form-item>
<!-- <el-form-item
label="是否启用:"
prop="enable"
>
<el-switch v-model="form.enable">
</el-switch>
</el-form-item> -->
</el-form>
data(){
form: {
structId: this.$store.state.struct.structId,
"id": '',
"name": "",
"email": "",
"phone": "",
},
rules: {
name: [{ required: true, message: "不能为空", trigger: "change" },],
phone: [
{
pattern:
/^((1[3,5,8][0-9])|(14[5,7])|(17[0,5,6,7,8])|(19[7]))\d{8}$/,
message: "请检查手机号格式是否正确",
trigger: "blur",
},
],
email: [
{
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
message: "请检查邮箱格式是否正确",
trigger: "blur",
},
],
},
}