博客

使用element-ui form表单组件时，设置好以下的参数，即可在提交时，进行非空校验

form表单组件地址



https://element.eleme.cn/#/zh-CN/component/form




第一步：

在el-form-item 标签里将

prop 属性

设置为需校验的字段名即可

（注：prop的名字最好设置为与后端的字段相一致）

<div class="detailed-item">
    <el-form-item class="detailed" prop="projectName" >
        <div class="item-meg">参赛项目名称</div>
        <el-input v-model="form.projectName" placeholder="请输入参赛项目名称~" ></el-input>
    </el-form-item> 
    <el-form-item class="detailed" prop="weChatId">
         <div class="item-meg">微信</div>
         <el-input v-model="form.weChatId" placeholder="请输入负责人微信号~" ></el-input>
    </el-form-item>
</div>
<div class="detailed-item">
    <el-form-item class="detailed" prop="contestManager">
        <div class="item-meg">负责人</div>
        <el-input v-model="form.contestManager" placeholder="请输入负责人姓名~" ></el-input>
     </el-form-item> 
    <el-form-item class="detailed" prop="phoneNumber">
        <div class="item-meg">手机号</div>
        <el-input v-model="form.phoneNumber" placeholder="请输入手机号码~" prefix-icon="el-icon-arrow-down" >  </el-input>
    <div class="check">
    <el-input v-model="form.phoneNumberCode" placeholder="请输入验证码~" style="margin-top: .1rem" ></el-input>
    <div class="btn-yzm" @click="getPhoneCheck(form.phoneNumber)">获取验证码</div>  
</div>
 </el-form-item>
</div>

第二步：

在data里面，写入rules:

 rules:{
      projectName: [
           { required: true,message: '参赛项目名称不能为空~', trigger: 'blur'}
           ],
      weChatId: [
           { required: true, message: '负责人微信号不能为空~', trigger: 'blur' }
           ],
      phoneNumber:[
            { required: true, message: '手机号码不能为空~', trigger: 'blur'}
            ],
      contestManager: [
          { required: true, message: '负责人姓名不能为空~', trigger: 'blur' }
            ],
    }

第三步：

在methods里面，写入提交方法

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            this.$message.error('请将报名信息填写完整！');
            return false;
          }
        });
      },