Form 表单验证

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单,您可以收集、验证和提交数据。

TIP

Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。

验证过程

示列1

     <el-dialog title="新增业主" v-model="dialogVisible" width="30%">
        <el-form ref="formRef" :model="form" label-width="120px" :rules="baseRules">
          <el-form-item label="业主名称" prop="ownerName">
            <el-input v-model="form.ownerName" style="width: 80%"/>
          </el-form-item>

          <el-form-item label="手机号/账号" prop="ownerPhone">
            <el-input v-model="form.ownerPhone" style="width: 80%"/>
          </el-form-item>

          <el-form-item label="密码" prop="ownerPassword">
            <el-input v-model="form.ownerPassword" style="width: 80%"/>
          </el-form-item>

          <el-form-item label="年龄" prop="ownerAge">
            <el-input v-model="form.ownerAge" style="width: 80%" />
          </el-form-item>

          <el-form-item label="房屋ID" prop="ownerHouseId">
            <el-input v-model="form.ownerHouseId" style="width: 80%"/>
          </el-form-item>

          <el-form-item label="邮箱" prop="ownerEmail">
            <el-input v-model="form.ownerEmail" style="width: 80%"/>
          </el-form-item>

          <el-form-item label="性别" prop="ownerGender">
            <el-radio-group v-model="form.ownerGender" class="ml-4">
              <el-radio :label="1" size="男">男</el-radio>
              <el-radio :label="2" size="女">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="出生日期" prop="ownerTime">
            <el-date-picker v-model="form.ownerTime" value-format="YYYY-MM-DD" type="date" style="width: 80%" clearable></el-date-picker>
          </el-form-item>


          <el-form-item label="业主头像">
            <el-upload ref="upload" action="http://localhost:8080/files/upload" :on-success="filesUploadSuccess">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>


        </el-form>


        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
      </el-dialog>

img

想要对输入框进行验证需要绑定prop名如下示列

 data(){
     return{
         //示列1中的 rules="baseRules" 绑定表单
         baseRules: {
   ownerName: [
          { required:true, message:'请输入业主名称',trigger:'blur'},
          {required:true,min:1,max:10, message: '长度在1到10个字符串内',trigger: 'blur'}
        ],
     }
 }

效果:

img

img

模板name: [ { pattern: 验证条件, required: true, message: "提示信息", trigger: "blur" }]

  • name:为prop名 示列中的ownerName
  • type:类型

    • 验证数值:number
    • 验证日期:date
    • 验证多选:array
    • 验证邮箱:email等等
    • 这些虽然是自带的 但是有局限性 我推荐使用正则表达式 我下面会写详细的使用教程
  • required:是否必选项(此栏是否为空)
  • message:报错信息
  • trigger:触发方式

    • blur :失去焦点时进行验证
      常用:对 input 输入框的验证
    • change :当值发生变化时进行验证
      常用:下拉框select,日期选择框date-picker,复选框checkbox,单选框radio

正则表达式验证(重点)

vue的rules中自带的校验规则个人感觉不好用推荐使用正则表达式的,那么应该如何使用呢? 步骤如下:

1、创建regex.js

在Vue项目中的utils包创建regex.js文件 用来存放正则表达式

img

2、使用export const命名导出 编写需要的正则表达式

export const reg_tel_命名 = 正则表达式/

export const reg_tel_命名 = 正则表达式/

export const reg_tel_命名 = 正则表达式/等等

3、使用正则表达式

例子:

 //导入需要的正则表达式
import {reg_tel_phone} from "@/utils/regex";
data(){
     return{
         baseRules: {
   ownerName: [
            { required:true, message:'请输入手机号',trigger:'blur'},
          { pattern:reg_tel_phone, message: '请输入正确的手机号' ,trigger:'blur'}
        ],
     }
 }

正则表达式:

//验证是否合法手机号或座机号
export const reg_tel_phone = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/

效果

img

本人整理的正则表达式(如有问题,请留言)

//验证是否合法手机号或座机号
export const reg_tel_phone = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
//是否合法IP地址
export const reg_tel_ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
//验证是否合法身份证号码
export const reg_tel_idCard =/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
//验证是否合法邮箱
export const reg_tel_mailbox = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
//验证整数填写
export const reg_tel_integer = /^-?[1-9]\d*$/
//验证正整数填写
export const reg_tel_positiveInteger = /^[1-9]\d*$/
//验证是否是小写字母
export const reg_tel_lowercaseLetter = /^[a-z]+$/
//验证是否是大写字母
export const reg_tel_capitalLetter = /^[A-Z]+$/
//验证是否是大小写混合
export const reg_tel_mixedCase = /^[A-Za-z]+$/
//验证多个8位数字格式(yyyyMMdd)并以逗号隔开
export const reg_tel_digitalFormat = /^\d{8}(\,\d{8})*$/
//验证数字加英文,不包含特殊字符
export const reg_tel_numberPlusEnglish = /^[a-zA-Z0-9]+$/
//验证前两位是数字后一位是英文
export const reg_tel_theFirstTwoAndTheLastOneAreInEnglish = /^\d{2}[a-zA-Z]+$/
//密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)
export const reg_tel_password = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/
//中文校验
export const reg_tel_chinese = /^[\u0391-\uFFE5A-Za-z]+$/

确定按钮

如果用户直接按确定不会提示任何报错信息需要加点代码

<el-form ref="formRef" :model="form" label-width="120px" :rules="baseRules">

在表单这行中加上 ref="formRef"

示列

this.$refs['formRef'].validate(valid => {
  // 判断是否验证通过
  if(valid){
    request.post("/OwnerInfo", this.form).then(res => {
      console.log(res)
      if (res.code === '0') {
        this.$message({
          type: "success",
          message: "新增成功!"
        })
      } else {
        this.$message({
          type: "error",
          message: res.msg
        })
      }
      //刷新表格数据
      this.load()
      this.$refs["form"].clearValidate(); //移除校验结果
      //关闭弹窗
      this.dialogVisible = false
    })
  }
})

效果:

按下确定后出现报错信息

img

最后修改:2023 年 05 月 16 日
如果觉得我的文章对你有用,请随意赞赏