Form验证
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* el-form 的 model 属性 [#fbb70e28]
el-input 绑定的元素必须是 el-form 的 model 的直接属性，否...
如下面的页面文件所示，el-form 的 model 是 loginForm 那么 ...
#codeprettify{{
<el-form ref="loginForm" :model="loginForm" label-positio...
<el-form-item prop="username" label="用户名" :rules="$f...
<el-input v-model="loginForm.username" type="text" au...
<svg-icon slot="prefix" icon-class="user" class="el...
</el-input>
</el-form-item>
</el-form>
}}
validate的“index.js”文件里面
#codeprettify{{
case 'username':
rules.push({ pattern: /^[\w\d]{3,15}$/, message...
}}
&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...
<template slot-scope="scope">
<el-popover :ref="scope.row.id" placement="top" :key=...
<el-form :ref="'delForm' + scope.row.id" :model="sc...
<p>确定删除吗？</p>
<el-form-item label="原因" prop="reason" :rules="...
<el-input type="textarea" placeholder="请填写删...
</el-form-item>
</el-form>
<div style="text-align: right;">
<el-button size="mini" type="text" @click="$refs[...
<el-button size="mini" type="primary" @click="del...
</div>
<i class="el-icon-delete" slot="reference" style="c...
</el-popover>
</template>
</el-table-column>
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* el-form 的 model 属性 [#fbb70e28]
el-input 绑定的元素必须是 el-form 的 model 的直接属性，否...
如下面的页面文件所示，el-form 的 model 是 loginForm 那么 ...
#codeprettify{{
<el-form ref="loginForm" :model="loginForm" label-positio...
<el-form-item prop="username" label="用户名" :rules="$f...
<el-input v-model="loginForm.username" type="text" au...
<svg-icon slot="prefix" icon-class="user" class="el...
</el-input>
</el-form-item>
</el-form>
}}
validate的“index.js”文件里面
#codeprettify{{
case 'username':
rules.push({ pattern: /^[\w\d]{3,15}$/, message...
}}
&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...
<template slot-scope="scope">
<el-popover :ref="scope.row.id" placement="top" :key=...
<el-form :ref="'delForm' + scope.row.id" :model="sc...
<p>确定删除吗？</p>
<el-form-item label="原因" prop="reason" :rules="...
<el-input type="textarea" placeholder="请填写删...
</el-form-item>
</el-form>
<div style="text-align: right;">
<el-button size="mini" type="text" @click="$refs[...
<el-button size="mini" type="primary" @click="del...
</div>
<i class="el-icon-delete" slot="reference" style="c...
</el-popover>
</template>
</el-table-column>
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
