表单验证

1.在页面新增编辑共用一页面的情况下普通表单验证

html:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item></el-form>

js:rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ],}

2.如果要新增带校验，编辑不带校验

在新增时

  this.FormRules['sysUser.password'] = [{ required: true, message: "请输入密码", trigger: "blur" }];

   this.FormRules['sysUser.confirPassword'] = [{ required: true, message: "请输入确认密码", trigger: "blur" }];

编辑时

  this.FormRules['sysUser.password'] = null;

  this.FormRules['sysUser.confirPassword'] = null;