动态添加form表单并进行验证

最新推荐文章于 2024-08-23 17:12:15 发布

阳光雨滴

最新推荐文章于 2024-08-23 17:12:15 发布

阅读量887

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/bbkhhvv/article/details/131484275

版权

该代码段展示了一个使用Vue.js的el-form组件创建的表单，用于收集姓名、单位、电话和身份证信息。每个字段都有相应的验证规则，如电话号码需符合特定格式，身份证也需通过正则表达式验证。表单支持动态添加和删除输入项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form inline label-position="top" ref="member" :model="formData">
          <div v-for="(item, index) in formData.members" :key="index" style="display: flex">
            <el-form-item label="姓名" :prop="'members.' + index + '.name'" :rules="[
              { required: true, message: '请输入姓名', trigger: 'blur' },
            ]">
              <el-input placeholder="请输入真实姓名" v-model="item.name">
              </el-input>
            </el-form-item>
            <el-form-item label="单位" :prop="'members.' + index + '.company'" :rules="[
              { required: true, message: '请输入单位', trigger: 'blur' },
            ]">
              <el-input placeholder="请输入您的工作单位" v-model="item.company">
              </el-input>
            </el-form-item>
            <el-form-item label="电话" :prop="'members.' + index + '.Iphone'" :rules="[
              { required: true, validator: validateIphone, trigger: 'blur' },
            ]">
              <el-input placeholder="请输入联系电话" v-model="item.Iphone">
              </el-input>
            </el-form-item>
            <el-form-item label="身份证" :prop="'members.' + index + '.idCard'" :rules="[
              { required: true, validator: validateidCard, trigger: 'blur' },
            ]">
              <el-input placeholder="请输入身份证" v-model="item.idCard">
              </el-input>
            </el-form-item>
            <div v-if="formData.members.length > 1" @click="remove(index)" class="icon">
              <img src="../../assets/image/icon_delete@2x.png" />
            </div>
          </div>
 </el-form>

<script>
  data(){
   return{
       formData{
          members: [{ name: "", company: "", Iphone: "", idCard: "" }],
     }
      
  }
}
methods:{
validateIphone(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入电话"));
      } else {
        const reg = /^(?:(?:\+|00)86)?1\d{10}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确格式"));
        }
      }
    },
    validateidCard(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入身份证号"));
      } else {
        const reg =
          /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确格式"));
        }
      }
    },
   add() {
      this.formData.members.push({
        name: "",
        company: "",
        Iphone: "",
        idCard: "",
      });
    },
    remove(index) {
      if (this.formData.members.length > 1) {
        this.formData.members.splice(index, 1);
      } else {
        this.formData.members[0] = {
          name: "",
          company: "",
          Iphone: "",
          idCard: "",
          removable: false,
        };
      }
    },

}
</script>