vue表单单独对一个字段验证

以普通表单创建为例，代码如下：

<template><div><el-form :model="form" :rules="rules" ref="form><el-form-item label="名称" prop="name"><el-input v-model.trim="form.name" placeholder="名称"></el-input></el-form-item><el-form-item label="描述" prop="des"><el-input type="textarea" v-model.trim="form.des" placeholder="描述"></el-input></el-form-item><el-form-item><el-button type="primary" @click="create('form')">创建</el-button><el-button @click="cancel('form')">重置</el-button></el-form-item></el-form></div>
</template>
<script>export default {data() {return {form: {name:'',des: ''},rules: {name: [{required: true, message: '请输入名称', trigger: ['blur', 'change']}]}}},methods: {// 创建表单验证create(formName) {this.$refs[formName].validateField('name', valid => {if(valid) {// 表单验证通过}})},// 重置表单cancel(formName) {this.$refs[formName].resetFields();}}}
</script>

普通表单验证，如登录表单，请查看这里

多表单验证，请查看这里

vue表单单独对一个字段验证相关推荐

写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...
vue 表单验证并提交
vue 表单验证并提交一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则二.表单提交时验证 1.表单的提交按钮 2.ethods 方法一.常用验证方式 ...
vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formC ...
一个很好用的vue表单工具，快速进行表单开发
一个很好用的vue表单插件,已拖动的形式,快速的构建表单,可以对表单数据设置,是否必填,校验等操作,设置完成后,可以选择表单已哪种方式呈现(页面 or 弹窗) 插件地址: https://mrhj.g ...
vue表单验证，不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...

vue表单单独对一个字段验证

vue表单单独对一个字段验证相关推荐

最新文章

热门文章