表单循环绑定及座机和手机号同时校验

最新推荐文章于 2024-10-17 14:45:58 发布

weixin_47218354

最新推荐文章于 2024-10-17 14:45:58 发布

阅读量344

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_47218354/article/details/135969896

版权

文章详细描述了一个使用Vue.js构建的表单，包括下拉选择辖区、多行输入用户信息以及手机号码格式验证。内容涉及el-select、el-option等ElementUI组件的使用和数据验证规则。

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

<el-form ref="newForm" class="demo-newForm" :inline="true" :model="newForm" :rules="rules">

<el-form-item label="辖区" prop="areaId">
                  <el-select v-model="newForm.areaId" placeholder="请选择辖区" style="width: 100%">
                    <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
                  </el-select>
                </el-form-item>


<div v-for="(item, index) in newForm.emergencyResourceUserList" :key="index" class="user_form">
              <el-row>
                <el-col :span="7">
                  <div>
                    <el-form-item :label="index === 0 ? '联系人（主要）' : '联系人'" :prop="'emergencyResourceUserList.' + index + '.userName'">
                      <el-input v-model.trim="item.userName" clearable maxlength="20" placeholder="请输入联系人" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div style="display: flex; justify-content: center">
                    <el-form-item label="职位" :prop="'emergencyResourceUserList.' + index + '.userPosition'">
                      <el-input v-model.trim="item.userPosition" clearable maxlength="50" placeholder="请输入职位" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div style="display: flex; justify-content: end">
                    <el-form-item
                      label="联系方式"
                      :prop="'emergencyResourceUserList.' + index + '.userPhone'"
                      :rules="{
                        required: false,
                        validator: formValidatePhone,
                        trigger: 'blur',
                      }"
                    >
                      <el-input v-model.trim="item.userPhone" clearable maxlength="12" placeholder="请输入联系方式" />
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="user_btn">
                    <el-form-item label="按钮" prop="projectName" style="color: #fff">
                      <el-button type="text" style="color: red" @click="handleDel(index)">删除</el-button>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </div>
<div>
              <el-row>
                <el-col :span="21">
                  <div class="insert_user" @click="handleAddUser">+ 添加新的联系人</div>
                </el-col>
              </el-row>
            </div>




 newForm: {
          areaId: '',
          emergencyResourceId: '',
          emergencyResourceUserList: [
            {
              emergencyResourceId: '',
              emergencyResourceUserId: '',
              isMainContact: true,
              userName: '',
              userPhone: '',
              userPosition: '',
            },
          ],
          location: '',
          resourceIcon: '',
          resourceIntroduce: '',
          resourceName: '',
          resourceType: '',
        }, //表单对象

rules: {
          areaId: [
            {
              required: true,
              message: '请选择所属辖区',
            },
          ],}
</el-form>

座机手机号校验

<el-form-item
                      label="联系方式"
                      :prop="'emergencyResourceUserList.' + index + '.userPhone'"
                      :rules="{
                        required: false,
                        validator: formValidatePhone,
                        trigger: 'blur',
                      }"
                    >
                      <el-input v-model.trim="item.userPhone" clearable maxlength="12" placeholder="请输入联系方式" />
                    </el-form-item> 


data() {
      const validatePhone = (rule, value, callback) => {
        if (!value) {
          callback()
        } else {
          let regPone = null
          let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/ //最新16手机正则
          let tel = /^(0\d{2,3}-){0,1}\d{7,8}$/ //座机
          if (value.charAt(0) == 0) {
            // charAt查找第一个字符方法，用来判断输入的是座机还是手机号
            regPone = tel
          } else {
            regPone = mobile
          }
          if (!regPone.test(value)) {
            callback(new Error('请输入正确的电话格式！'))
          }
          callback()
        }
      }
      return {
        formValidatePhone: validatePhone,
}
}