最近在写项目时遇到了一个问题,rules
不生效,在网上找了很多办法都没有解决,后来多次修改发现,当页面中存在多个<el-form>
时,所加的rules
不会生效(尚未找出什么原因,大神请指教)。
正确做法:将<el-form-item>
放在一个<el-form>
里。
<el-form-item label="学生姓名" prop="stName">
<el-input v-model="form.stName" placeholder="请输入学生姓名" />
</el-form-item>
<el-form-item label="民族" prop="stNation">
<el-select v-model="form.stNation" placeholder="请选择民族" style="width: 203px;">
<el-option v-for="dict in stNations" :label="dict.dictLabel" :value="dict.dictValue" :key="dict.dictValue" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="学校" prop="stSchoolId">
<el-select v-model="form.stSchoolId" placeholder="请输入所属学校" style="width: 200px" @change="getGrades">
<el-option v-for="(item,index) in schoolListData" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="生源" prop="stResource">
<el-select v-model="form.stResource" placeholder="请选择生源" style="width: 200px;">
<el-option v-for="dict in stResources" :label="dict.dictLabel" :value="dict.dictValue" :key="dict.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="班级" prop="stClass">
<el-input v-model="form.stClass" placeholder="请输入班级" />
</el-form-item>
<el-form-item label="年级" prop="stGrade">
<el-input-number v-model="form.stGrade" @change="handleChange" :min="1" :max="this.grades.data"></el-input-number>
</el-form-item>
<el-form-item label="身份证号" prop="stSelfno">
<el-input v-model="form.stSelfno" placeholder="请输入身份证号" />
</el-form-item>
<el-form-item label="亲属姓名" prop="stContacts">
<el-input v-model="form.stContacts" placeholder="请输入亲属姓名" />
</el-form-item>
<el-form-item label="联系方式" prop="stPhone">
<el-input v-model="form.stPhone" placeholder="请输入联系方式" />
</el-form-item>
<el-form-item label="家庭住址" prop="stAddress">
<el-input v-model="form.stAddress" placeholder="请输入家庭住址" />
</el-form-item>
<el-form-item label="遗传病史" prop="medicalHistory">
<el-input v-model="form.medicalHistory" placeholder="请输入遗传病史"/>
</el-form-item>
<el-form-item label="首次月经初潮/遗精年龄" prop="stFirstTime" label-width="160px">
<el-input v-model="form.stFirstTime" placeholder="请输入首次月经初潮/遗精年龄" style="width: 120px"/>
</el-form-item>
</el-form>
表单验证:
rules: {
stName: [
{ required: true,message: "学生姓名不能为空",trigger: "blur"}
],
stSelfno:[{
required:true,
message:"请输入正确的身份证号码",
min:18,
max:18
}],
medicalHistory:[{
required: true,
message: "遗传病史不能为空",
trigger: "blur"
}]
}
点击确定后实现效果: