elementUI的表单验证

表单官网都有，但是有些细节需要注意。
表单的验证有两个方面，

一是Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

<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>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
       }
    }
}

	这个方法，还可以自定义校验

rules: {
 name: [
   { 
   	 validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('活动名称'));
        } else {
          callback();
        }
    }, 
	trigger: 'blur' 
   }
 ],
}

	这个方法，还可以手动校验

this.$refs.ruleForm.validateField('name');

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

<el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >

整个案例

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  <el-form-item label="审核意见" prop="taskProcessType">
    <el-select v-model="ruleForm.taskProcessType">
      <el-option label="同意" value="AG"></el-option>
      <el-option label="拒绝" value="RJ"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="拒绝原因" prop="remark" required>
    <el-input v-model="ruleForm.remark"></el-input>
  </el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button> 
    <el-button @click="validateRemark()">手动验证拒绝原因</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          taskProcessType: '',
          remark: ''
        },
        rules: {
          taskProcessType: [
            { required: true, message: '请选择审核意见', trigger: 'change' }
          ],
          remark: [
          	{
           	 validator:(rule, value, callback)=>{
			    if (this.postData.taskProcessType == 'RJ' && (value === '')) {
			      callback(new Error('请输入拒绝原因'));
			    }else if (value.length > 50){
			      callback(new Error('拒绝原因长度不能超过50位'));
			    }else {
	         	  callback();
	         	}
			},
			trigger: 'blur'
          ]
      };
    },
    methods: {
      submitForm(formName) {
      //提交时候统一验证表单
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //手动验证某个表单元素
      validateRemark(){
      	this.$refs.ruleForm.resetFields('remark');
      }
    }
  }
</script>

仔细查看文档才是硬道理！
官网：https://element.eleme.cn/#/zh-CN/component/form

elementUI的表单验证

猜你喜欢