Element表单验证

element-ui

vue

发布日期: 2021-03-06

更新日期: 2021-04-21

文章字数: 1.5k

阅读时长: 7 分

1>常规验证和自定义验证

1.element-ui 中的表单校验

要加验证之前一定要确保已经写了 prop 属性，该属性是跟 rule 绑定在一起的，也可以在行内单独制定 rules。

方式一：

常规写法

el-from :rules=“rules”

el-from-item 中 prop 与 rules 中属性名对应

方式二：

行内校验

直接 el-from-item 中写 prop 和:rules 需求

方式三：

自定义校验同方式一只是将其抽取出来写成函数

rule 为校验规则对象

value 为输入值

callback 为回调函数用于返回

<el-dialog title="新增学生" :visible.sync="addStudent" width="400px">
   <el-form  :model="addDate" :rules="addRules" ref="addForm">
      <el-form-item label="账号" :label-width="formLabelWidth" prop="codeName">
        <el-input v-model="addDate.codeName" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
      <el-input v-model="addDate.name" auto-complete="off"></el-input>
    </el-form-item>

        <-- 1.单独对行内效验规则（prop,:rules）-->
    <el-form-item label="学号" :label-width="formLabelWidth" prop="code"  :rules="[{ required: true, message: '不能为空',trigger:'blur'}]">
      <el-input v-model="addDate.code"  auto-complete="off"></el-input>
    </el-form-item>

    <el-form-item label="专业" :label-width="formLabelWidth" prop="major_name">
      <el-select v-model="addDate.major_name" placeholder="请选择专业">
        <el-option v-for="(major,index) in majorList" :label="major.name" :value="major.name"></el-option>
    </el-select>
    </el-form-item>

        <-- 行内效验的三元表达式形式 --->
         <el-form-item prop="money" :rules="ruleForm.isGiveMoney?[{ required: true, message: '请输入1-1000000之间的正整数', trigger: 'blur' }]:[{ required: false}]">
        <el-input v-model="ruleForm.money" :disabled="ruleForm.isGiveMoney==0" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
     </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addStudent = false">取 消</el-button>
      <el-button type="primary" @click="addStudentData('addForm')">确 定</el-button>
  </div>
 </el-dialog>
export default ({
    data () {
    /**3.自定义效验规则**/
    // 添加学生账号的正则
    let validcodeName=(rule,value,callback)=>{
        let reg=/[0-9a-zA-Z]{4,9}/
        if(!reg.test(value)){
          callback(new Error('账号必须是由4-9位数字和字母组合'))
        }else{
          callback()
        }
    };
    let validCode=(rule,value,callback)=>{
        let reg=/[0-9a-zA-Z]{4,9}/
        if(!reg.test(value)){
          callback(new Error('学号必须是由4-9位数字和字母组合'))
        }else{
          callback()
        }
    };
    return {
      /***1.常规效验规则（prop需要与rules中属性名对应）***/
      addRules:{
          codeName:[ //多种效验
            {required:true,message:'请输入账号',trigger:'blur'},
            {validator:validcodeName,trigger:'blur'}
          ],
          name:[ //常规效验input
            {required:true,message:'请输入姓名',trigger:'blur'},//非空效验
            { min: 2,max:5 message: '请输入2至5个字符', trigger: 'blur' },//长度效验
            { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号'},//正则效验
              { type: 'number', message: '年龄必须为数字值'},//数字效验
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' },//数组长度效验
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' },//时间效验
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },//email效验
          ],
          major_name:[ //常规效验 select
            {required:true,message:'请选择专业',trigger:'change'},
          ],
          mobile:[ //自定义效验
            {validator:validMobile,trigger:'blur'}
          ],
          email:[
            {type:'email',message:'格式不对',trigger:'blur'}
          ],
         },//添加学生的正则
    },
    methods:{
            // 但是有时候需要移除其中的某一项校验
      if (/*条件*/) {
        this.$refs[addForm].clearValidate(['name']);
      }
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
     }
})

2.validateField()和 validate()效验表单的区别

<el-form :label-width="120" :rules="formRules" :model="form" ref="form">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

export default ({
    data(){
      return {
      form：{ name: "" }
        // 校验规则
      formRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    save（） {
         //1>对部分表单字段进行验证
         //三个参数：是否校验成功Boolean和回调函数（是否校验成功Boolean）
         //validateField(props: array | string, callback: Function(errorMessage: string))
       this.$refs.form.validateField("phone", errMsg => {
          if (errMsg) {
                console.log("手机号校验未通过");
              } else {
                console.log("校验通过");
              }
      });

            //2>对全部表单字进行验证
            //两个参数：是否校验成功Boolean和未通过校验的字段Object。
      //validate(callback: Function(boolean, object))
      this.$refs[form].validate((isvalid,) => {
          if (isvalid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
      //有可能this.$refs[form].validate() 方式不识别。需要使用: this.$refs.form.validate();
    })
})

3.clearValidate()和 resetFields()清除表单校验的区别

<el-form :label-width="120" :rules="formRules" :model="form" ref="form">
  <el-form-item label="活动名称" prop="name" ref="formName">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

export default ({
    data(){
    const validateDepart = (rule, value, callback) => {
      if (!this.formRules.name) {
        callback(new Error('请填写'))
      } else {
        callback()
      }
    }
      return {
      form：{ name: "" }
        // 校验规则
      formRules: {
        name: [
          { required: true, trigger: 'blur', validator: validateDepart, message: '请输入活动名称'},
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    empty（） { //重置

        //1>移除所有的效验
      this.$refs.form.resetFields(); //重置表单和移除校验结果
      this.$refs.form.clearValidate(); //移除校验结果

            //2>移除部分效验
      // Function(props: array | string)
      this.$refs['form'].clearValidate(['name']);
      this.$refs['formName'].clearValidate()

             this.formRules.name[0].validator = (rule, value, callback) => {
              callback()
       }

      }
    })
})

// 二者都能清除验证，但是 resetFields（）会重置字段值，而在 vue 中大量用到的数据的绑定，很可能出现
// 同一个数据绑定在多处的情况，如果滥用 resetFields 很可能造成界面上出现莫名的 bug

3>动态验证

单循环和双循环

Element 的表单验证要注意的就是 v-model 和 prop 的值要对应上，不然无法触发验证。

循环的数组和其他表单项在同一个 form 表单中

prop 改为：prop，形式为’Item.’+index+’.name’，String 类型。

每一个循环中的都需要加：rules

<el-form :model="formData" :rules="rules" ref="ruleForm" >
   <template v-for="(Item, Index) in formData.Parent">
    <el-form-item label="姓名" :prop="'Parent.' + Index + '.name'"
                                :rules="{required: true, message: '请输入姓名',trigger: 'blur'}">
       <el-input v-model="Item.name"></el-input>
    </el-form-item>
    <template v-for="(item, index) in Item.children">
      <el-form-item label="性别" :prop="'Parent.' + Index + '.children.' + index + '.sex'"
                                  :rules="{required: true, message: '请输入性别',trigger: 'blur'}">
        <el-input v-model="item.sex"></el-input>
        </el-form-item>
    </template>
  </template>
 </el-form>

export default ({
    data(){
      return {
         formData: {
        Parent: [
          { name: '',children: [{sex: '' },{sex: ''} ]},
          { name: '',children: [{sex: '' },{sex: ''} ]}
        ]
      },
            rules: {}
    }
  }
})