表单验证

最新推荐文章于 2024-04-02 23:08:59 发布

Cxxxxxin

最新推荐文章于 2024-04-02 23:08:59 发布

阅读量655

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/m0_63476377/article/details/121972800

版权

本文介绍了如何在Vue.js项目中使用ElementUI库进行表单验证。通过设置`<el-form>`的`ref`、`rules`、`model`和`label-width`属性，以及`<el-form-item>`的`prop`属性，可以实现表单数据绑定和验证规则。同时，利用`<el-input>`组件的`v-model`和`maxlength`属性控制输入框的数据和长度。点击按钮触发弹窗，输入信息并立即创建记录。

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

表单内容

<!-- ---------------添加司机按钮---------------- -->
    <el-dialog title="添加司机"
               :visible.sync="addDialogDriver"
               width="40%"
               center>
    <el-form ref="form" :rules="formRules" :model="form" label-width="80px">
          <el-form-item label="名字" prop="driverName">
            <el-input v-model="form.driverName"></el-input>
          </el-form-item>
          <el-form-item label="性别"  prop="gender">
          <el-radio-group v-model="form.gender">
             <el-radio label="男"></el-radio>
             <el-radio label="女"></el-radio>
          </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
             <el-date-picker
                 v-model="form.birthday"
                 type="date"
                 placeholder="选择日期"
                 format="yyyy 年 MM 月 dd 日"
                 value-format="yyyy-MM-dd">
               </el-date-picker>
          </el-form-item>
          <el-form-item label="驾驶证" prop="licenseGrade">
            <el-select v-model="form.licenseGrade " placeholder="请选择驾驶证类型">
              <el-option label="A1型" value="A1"></el-option>
              <el-option label="C1型" value="C1"></el-option>
              <el-option label="D型" value="D"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="居住地址"  prop="address">
            <pickArea @getSite="setArea" />
            <el-input v-model="form.address"></el-input>
           </el-form-item>
          <el-form-item>
             <el-button class="creat-order" type="primary"
                        @click="createDrivers()">立即创建</el-button>
             <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
    </el-dialog>

 data: function() {
    return {
       formRules: {
            driverName:[
              {required: true, message: '请输入用户姓名', trigger: 'blur'},
              { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' },
            ],
            gender:[
              {required: true,message: '请选择用户性别',trigger: "blur"}
            ],
            // idCard:[
            //   {required: true,message: '请输入身份证号',trigger: 'blur'},
            //   {min: 18, message: '长度在 18  个字符', trigger: 'blur' },
            // ],
            phone:[
              {required: true,message: '请输入电话号码',trigger: 'blur'},
               { min: 11, message: '长度在 11  个字符', trigger: 'blur' },
            ],
            birthday: [
              { required: true, message: '请选择生日日期', trigger: 'blur'}
            ],
            licenseGrade:[
              {required: true,message: '请选择驾驶证类型',trigger: 'blur'}
            ],
            address: [
                {required: true,message: '请选择并填入详细地址',trigger: "blur"},
            ]
        },
    };
  },

<el-form> ：代表这是一个表单
<el-form> ：ref：表单被引用时的名称，标识
<el-form> ：rules：表单验证规则
<el-form> ：model：表单数据对象
<el-form> ：label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
<el-form> ：<el-form-item>：表单中的每一项子元素
<el-form-item> ： label：标签文本
<el-form-item> ：prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
<el-input> ：输入框
<el-input> ：v-model：绑定的表单数据对象属性
<el-input> ： maxlength：最大字符长度限制

点击添加司机按钮，展示弹窗，弹窗里面输入信息后立即创建。

    // -----打开添加按钮-------
    addDrivers: async function () {

      this.addDialogDriver = true
    },
    // -------添加司机-----
    createDrivers(form) {
      this.add = form
      console.log(this.form,99)
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.$http.post( `/driverUser/addDriver`, this.form )
          this.$message.success('添加成功')
          this.addDialogDriver = false
        } else {
          this.$message.error('提交失败，验证不通过')
          return false
        }
      })
      this.reload();
    },

找的时候觉得这个写的很详细！可参考：

在vue中使用rules对表单字段进行验证_我的博客-优快云博客_rules