vue+elementui 表单校验

表单校验

1. 表单校验

1. 在 el-form 上动态绑定校验规则

<el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
    <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="姓名"></el-input>
    </el-form-item>
</el-form>

2. 在 data 中定义校验规则

data(){
    return{
        rule: {
            name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        },
    }
}

2. 常用表单校验

{ required: true, message: '请输入活动名称', trigger: 'blur' },     // 非空校验
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }    //字符数校验
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }  // 指定date数据类型+非空校验
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } // 指定array数据类型+非空校验
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } // 指定email数据类型+非空校验

3. 自定义校验规则

1. 在 el-form 上动态绑定校验规则

<el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
    <el-form-item label="身份证号" prop="idNum">
        <el-input v-model.number="form.idNum" placeholder="身份证号"></el-input>
    </el-form-item>
</el-form>

[注意] v-model.number.trim="form.idNum"

v-model.number.trim=""

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

2. 在 data 中定义校验规则

data(){
    let isNum = (rule, val, callback) => {
      let reg = /^\d{18}$/;
      if (!reg.test(val)) {
        console.log("校验不通过");
        callback(new Error("请输入18位数字"));
      } else {
        console.log("校验通过");
        callback();
      }
    };
    return{
        rule: {
            idNum: [
                { required: true, message: "请输入证件号", trigger: "blur" },
                { validator: isNum, trigger: "blur" },
            ],
        },
    }
}

4. 提交表单时 对整个表单进行校验

1. ref 给 el-from 元素注册引用信息

<el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNum">
          <el-input v-model="form.idNum" placeholder="身份证号"></el-input>
        </el-form-item>
      </el-form>

2. this.$refs.ruleForm 获取 el-from 元素，调用 validate 方法校验整个表单

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {  // valid===true表示校验通过
          console.log("发起请求，提交数据");
        }
      });
    },

5. 重置整个表单

this.$refs.ruleForm 获取 el-from 元素，调用 resetFields 方法重置整个表单

this.$refs.ruleForm.resetFields()

6. 新增修改列表数据 demo---表单校验应用

<template>
  <div>
    <el-button @click="updata">新增</el-button>
    <!-- 列表展示区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button @click="updata(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增修改 表单弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="show"
      width="500px"
      :before-close="close"
    >
      <el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
        <el-form-item label="日期" prop="date">
          <el-input v-model="form.date" placeholder="日期"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNum">
          <el-input v-model="form.idNum" placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="close">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let isNum = (rule, val, callback) => {
      let reg = /^\d{18}$/;
      if (!reg.test(val)) {
        console.log("校验不通过");
        callback(new Error("请输入18位数字"));
      } else {
        console.log("校验通过");
        callback();
      }
    };
    return {
      rule: {
        date: [{ required: true, message: "请输入日期", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        idNum: [
          { required: true, message: "请输入证件号", trigger: "blur" },
          { validator: isNum, trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          idNum: "140427199709111111",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          idNum: "140427199709111111",
          address: "上海市普陀区金沙江路 1517 弄",
        }
      ],
      form: {
        date: "",
        name: "",
        address: "",
        idNum: ""
      },
      show: false,
    };
  },
  methods: {
    updata(row) {
      console.log(row);
      this.form = { ...row }; //深拷贝
      console.log(this.form === row);
      this.show = true;
    },
    close() {
      this.show = false;
      this.$refs.ruleForm.resetFields();
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(valid);
          console.log("发起请求");
        } else {
          console.log(valid);
        }
      });
      this.show = false;
    },
  },
};
</script>