el-form 里的 el-form-item 必填/正则检验

原创已于 2023-04-04 15:31:16 修改 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-04-04 15:28:31 首次发布

该文章展示了一个使用Vue.js框架构建的表单示例，包括用户名、手机号、身份证和人脸信息字段。每个字段都配置了相应的验证规则，如必填项和正则表达式验证，确保手机号和身份证号的格式正确。人脸信息部分提到了图片上传功能。

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="手机号" prop="userTel">
          <el-input v-model="form.userTel" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="身份证" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入身份证" />
        </el-form-item>
        <el-form-item label="人脸信息" prop="faceImg">
          <el-form-item>
            <!-- -----------图片上传-  单张图片上传---------------- -->
          </el-form-item>
        </el-form-item>
        
      </el-form>

data数据：

 data() {
    return {
          rules: {
        userName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        userTel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
            message: "请输入正确号码",
            trigger: "blur",
          },
        ],
        userId: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确格式",
            trigger: "blur",
          },
        ],
        faceImg: [
          { required: true, message: "请上传人脸信息", trigger: "blur" },
        ],
      },
    
    }