VUE_Form表单验证

2021-01-04 17:03:17 阅读：179 来源： 互联网

Form表单验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

Form表单

ref:注册引用获取页面DOM元素,获取子组件对象。

在Vue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上，注册后的引用信息都会呈现在父组件/Vue实例的 (. r e f s ) 上，这时，我们就可以通过 ( .refs) 上，这时，我们就可以通过(.ref**s)上，这时，我们就可以通过(.refs) 获取到引用的 DOM 对象或是子组件信息。

引用自：CSDN：[试图让你心动] Vue中ref的作用？？？ https://blog.csdn.net/zhangmeixia969/article/details/109777146
:model是v-bind:model的缩写。
```
 <child :model="message"></child>
```
只是将父组件的值传递给和子组件，但是并未实现子组件和父组件之间的双向数据绑定，当然引用类型除外，子组件改变了引用类型的数据的话，父组件的数据也会跟着改变。
v-model:

通常用于表单上双向数据的绑定，如果除了表单其他组件使用时，起不到任何效果。它还可以实现子组件到父组件的双向数据动态绑定。

和父组件之间的双向数据绑定，当然引用类型除外，子组件改变了引用类型的数据的话，父组件的数据也会跟着改变。

引用自：CSDN：北城南溪 vue中v-model和 :model的区别理解 https://blog.csdn.net/qq_45001147/article/details/107984371

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，

但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
```

<input type="text" v-model="message">
<p>{{message}}</p>
```
```

<input type="text" :value="message" @input="message = $event.target.value">
```
引自:CSDN：Liu_Jun_Tao vue的model选项 https://blog.csdn.net/liu_jun_tao/article/details/90232658

html

<!-- ref:
model -->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login_form" label-width="0">
    <!-- 用户名 属性绑定到username-->
    <el-form-item prop="username">
        <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item prop="password">
        <el-input v-model="loginForm.password" prefix-icon="iconfont icon-locked"></el-input>
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item class="btns">
        <el-button type="primary">登录</el-button>
        <el-button type="info">重置</el-button>
    </el-form-item>
</el-form>

script


<script>
export default {
    data(){
        return{
            // 表单数据model
            loginForm:{
                username:"",
                password:"",
            },
            // 校验规则rules
            loginRules: {
                username: [
                    //必填,提示信息,blur失去焦点时验证/change改变时验证
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    //最小长度,最大长度,提示信息,失去焦点时验证
                    { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入用户密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
                ],
            },   
        }
    }
}
</script>

标签：VUE,Form,表单,引用,blur,组件,model
来源： https://www.cnblogs.com/mofic/p/14230827.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE_Form表单验证

Form表单验证