element——form表单规则验证总结_element中form表单验证规则大全 csdn

基础

• form标签需要设置 model 和 rules 属性 <el-form :model="ruleForm" :rules="rules">
• form-item标签需要设置prop属性，对于rules规则里的属性名一致 <el-form-item label="户名" prop="accountHolder">
• input标签绑定变量 <el-input v-model="ruleForm.accountHolder">

基本校验规则

案例

 <el-dialog title="退款结算" :visible.sync="show"
      @close="resetForm" width="800px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="small">
        <el-form-item label="户名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="校验字符长度"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="ruleForm.tel" placeholder="正则校验"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="自定义校验"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age" :rules="[
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字值' }
        ]">
          <el-input v-model.number="ruleForm.age" placeholder="行内type校验"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankCardNo">
          <el-input v-model="ruleForm.bankCardNo" placeholder="异步校验"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button :disabled="disabled" type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

	  disabled: false, // 有异步校验需要在校验完成前禁用按钮，防止重复点击提交按钮重复调用验证接口
 	
      ruleForm: {
      },
      rules: {
        name: [
          { required: true, message: "请输入户名", trigger: "blur" },
          { message: "户名长度2-6位", min: 2, max: 6, trigger: "blur" },
        ],
        tel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { pattern: /^1[3-9](\d{9})$/, message: '请输入正确的手机号', trigger: "blur" },
        ],
        password: [
          { required: true, validator: checkPassWord, trigger: 'blur' }
        ],
        bankCardNo: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          { validator: checkBankCardNo, trigger: 'blur' }
        ],
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 自定义和异步验证规则定义

// 密码校验 rule(当前规则),value(当前值),callback(回调函数)
let checkPassWord = (rule, value, callback) => {
  const reg =
    /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,64}$/;
  if (!value) {
    return callback(new Error("密码不能为空"));
  } else if (!reg.test(value)) {
    return callback(new Error("请输入8位以上密码，必须包含数字、字母、特殊符号"));
  } else {
    callback();
  }
}
// 异步校验
let checkBankCardNo = (rule, value, callback) => {
  checkBankCard({ bankCard: value }).then((res) => {
    if (res.data) {
      callback();
    } else {
      return callback(new Error("银行卡号验证错误"));
    }
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 提交方法

 submitForm(formName) {
      this.disabled = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('哈哈')
        } else {
          this.disabled = false
          console.log("error submit!!");
          return false;
        }
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12

点击驳回弹窗填写原因验证必填

	refuse() {
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /([^\s])/,   // 正则验证
        inputErrorMessage: '驳回原因必填'
      }).then(({ value }) => {   // value 输入的原因
        auditApi({
          drawCashRecordId: this.id,
          status: 3,
          remark: value
        }).then((res) => {
          this.$message.success("驳回成功");
          this.show = false;
          this.$emit("update");
        });
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

一个字段两种校验规则：

需求

• 当 type=1 时，手机号必填验证
• type=2时，手机号不必填，但是如果填了需要校验对不对

解决方案

• 动态修改 this.rules
• 利用对象的合并属性名相同会覆盖原有的

 <el-form-item label="负责人电话" prop="phone">
       <el-input v-model="form.phone"></el-input>
 </el-form-item>
  
 // 增加根节点，弹出弹窗
    handleClick() { 
      this.type=1
      this.getType()
      this.open = true; //改变rules数组之后，在执行打开弹窗
    },
    
   getType() {
      this.rules = Object.assign(
        this.rules, this.type==2 ? ({
          phone: [
            {
              validator: checkPhone,
              trigger: "blur",
            },
          ],
        }) : ({
          phone: [
            {
              required: true,
              message: "请输入负责人电话",
              trigger: "blur",
            },
            {
              validator: checkPhoneNumber,
              trigger: "blur",
            },
          ]
        })
      )
    },


function checkPhone(rule, value, callback) {
  const reg = /^1[3-9](\d{9})$/;
  if (value && !reg.test(value)) {
    return callback(new Error("号码格式不正确"));
  } else {
    return callback();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

• bug：一定要在改变rules数组之后，在执行打开弹窗的操作，以防不生效

对于多个字段在不同条件下验证规则不同

方法：分离组件：不同情况跳不同组件，组件可使用相同变量和逻辑，互不影响，只有规则不同