Form验证 のバックアップ(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• +Vue+Form验证 へ行く。
  • 1 (2022-05-09 (月) 11:41:18)
  • 2 (2022-05-09 (月) 11:59:44)
  • 3 (2022-05-14 (土) 11:38:38)

Vue

※前提条件：本情報はVue 2.0を基づいて説明してる

el-form 的 model 属性 †[edit]

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

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

<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”文件里面

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

コメント：

お名前:

(画像の文字列を入力して下さい)