elementUI动态表单验证

最新推荐文章于 2025-02-18 15:37:41 发布

原创最新推荐文章于 2025-02-18 15:37:41 发布 · 910 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#elementui #javascript #ecmascript

该文展示了如何在Vue.js应用中进行表单验证，包括直接在表单组件上设置全局验证规则，以及在`el-form-item`中单独添加自定义校验方法。文中提到了对标题、内容、身份证号和电话号码等字段的验证规则，如必填、正则匹配等。

1、直接在表单上加 rules

<template>
  <div>
    <el-form
      :model="form"
      ref="form"
      label-width="80px"
      :rules="rules"
    >
      <el-form-item label="标题名称" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="发布内容" prop="content">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2 }"
          v-model="form.content"
        ></el-input>
      </el-form-item>
      <el-form-item>
		<el-input v-model="form.idCard"></el-input>
	  </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit('form')">发 送</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "",
        content: "",
        idCard: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
        content: [
          { required: true, message: "请输入发布内容", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            required: true,
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的身份证号码',
            trigger: 'blur'
               }
        ],
      },
    };
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('验证通过')
        } else {
          return false;
        }
      });
    },
  },
};
</script>

自定义校验规则：

data() {
    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
    var validateNewPwd = (rule, value, callback) => {
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.oldPasswd === value) {
            callback(new Error('新密码与旧密码不可一致！'))
        } else {
            callback()
        }
    }
    var validateComfirmPwd = (rule, value, callback) => {
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.newPasswd !== value) {
            callback(new Error('确认密码与新密码不一致！'))
        } else {
            callback()
        }
    }
    return {
        form: {
            newPasswd: '',
            comfirmPwd: ''
        },
        rules: {
            newPasswd: [
                { required: true, message: '请输入新密码', trigger: 'blur' },
                { validator: validateNewPwd, trigger: 'blur' }
            ],
            comfirmPwd: [
                { required: true, message: '请输入确认密码', trigger: 'blur' },
                { validator: validateComfirmPwd, trigger: 'blur' }
            ]
        }
    }
}

2、在 el-form-item 单个添加


<el-form-item label="电话号码" :prop="phoneNum" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }, { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '请输入正确的电话号码', trigger: 'blur' }]">
    <el-input v-model="form.phoneNum" :maxlength="11" placeholder clearable></el-input>
</el-form-item>