Form验证 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+Form验证 へ行く。
• +Vue+Form验证 の差分を削除

#author("2022-09-04T12:25:42+08:00","default:Admin","Admin")
#author("2022-09-04T12:25:55+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本情報はVue 2.0を基づいて説明してる};
#contents


* el-form 的 model 属性 [#fbb70e28]

el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。

如下面的页面文件所示，el-form 的 model 是 loginForm 那么 el-form-item 中所有需要校验的表单的 的 model 也必须是loginForm.xxxx 即 loginForm 对象的直接属性。

#codeprettify{{
<el-form ref="loginForm" :model="loginForm" label-position="top" label-width="80px" :rules="rules">
  <el-form-item prop="username" label="用户名" :rules="$filter_rules({ required: true,type:'username',min:2,max:15 })">
    <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="用户名">
      <svg-icon slot="prefix" icon-class="user" class="el-input__icon" />
    </el-input>
  </el-form-item>
</el-form>
}}


validate的“index.js”文件里面

#codeprettify{{
        case 'username':
          rules.push({ pattern: /^[\w\d]{3,15}$/, message: '用户名的格式不正确。', trigger: 'blur' });
}}


&ref(vue_formva1.png);

* 内嵌 el-form 的校验 [#tdf57ce7]

内嵌了好多层的 form 校验的注意事项
- ref的命名要避免重复
- el-form 的 :model 要绑定
- el-form-item 验证的 prop 不要写成 scope.row.reason

#codeprettify{{
<el-table-column label="删除" width="60" align="center" v-if="canEdit">
  <template slot-scope="scope">
    <el-popover :ref="scope.row.id" placement="top" :key="scope.row.id">
      <el-form :ref="'delForm' + scope.row.id" :model="scope.row" size="small" :key="'delForm' + scope.row.id">
        <p>确定删除吗？</p>
        <el-form-item label="原因" prop="reason" :rules="$filter_rules({ required: true })">
          <el-input type="textarea" placeholder="请填写删除理由。" v-model="scope.row.reason"> </el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
        <el-button size="mini" type="primary" @click="delInfo(scope.row)">确定</el-button>
      </div>
      <i class="el-icon-delete" slot="reference" style="cursor: pointer"></i>
    </el-popover>
  </template>
</el-table-column>
}}

#hr();
コメント：
#comment_kcaptcha