vue表单验证自定义验证规则

这是公司里Vue+Element UI的项目。写的验证规则放图：

样式代码：

<div class="info" v-if="openslist"><h2 class="info-h">情况反馈表</h2><el-form ref="stateForm" :model="stateForm"  class="stateforms" :rules="rules"><el-row type="flex" class="row-bg"><el-col :span="12"><el-form-item label="听取意见方式" class="stateform" prop="way"><el-select v-model="stateForm.way"  placeholder="请选择" @change="getReturn()"><el-option label="面复" value="1"></el-option><el-option label="电话" value="2"></el-option><el-option label="座谈" value="3"></el-option><el-option label="未联系" value="4"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="办理人员态度" class="stateform" prop="attitude"><el-select v-model="stateForm.attitude"  placeholder="请选择" @change="getReturn()"><el-option label="好" value="1"></el-option><el-option label="较好" value="2"></el-option><el-option label="一般" value="3"></el-option><el-option label="较差" value="4"></el-option></el-select></el-form-item></el-col></el-row><el-form-item><el-button type="primary" @click="onSubmit('stateForm')" style="margin: 20px 0 0 80px;position: initial;">提交</el-button></el-form-item></el-form>
</div>

js代码:

data(){return{rules:{way:[{ required: true, message: '请输入听取意见方式', trigger: 'change' }],attitude:[{ required: true, message: '请输入人员态度', trigger: 'change' }]}}}

记住form表单一定要“:rules=“rules（自己定义）””，下面是自定义规则，放图：

样式代码：

   <el-form  label-width="100px" class="passstyle" :model="Formname"  :rules="editFormPwd"  ref="Formname"><el-form-item label="用户名："><!--<el-input  style="width:50%" clearable></el-input>--><span style="width:50%" class="passSpan" >{{username}}</span></el-form-item><el-form-item label="原密码："   prop="oldpwd" ><el-input  style="width:50%" clearable v-model="Formname.oldpwd" type="password"></el-input></el-form-item><el-form-item label="新密码：" prop="newpwd"><el-input  style="width:50%" clearable v-model="Formname.newpwd" type="password"></el-input></el-form-item><el-form-item label="确认密码：" prop="newpwds"><el-input  style="width:50%" clearable v-model="Formname.newpwds" type="password"></el-input></el-form-item><el-form-item><el-button type="primary"  @click="subpass('Formname')">提交</el-button></el-form-item></el-form>

js代码:

     data(){//这里是自定义的规则var newpwdmin=(rule, value, callback)=>{if(!value){return callback(new Error('请输入密码'));}else if(value !==this.Formname.newpwd){return callback(new Error('两次输入密码不一致!'));}else {callback()}}return{editFormPwd:{oldpwd:[{   required: true, message: '请输入原密码', trigger: 'blur'}],newpwd:[{ required: true, message: '请输入密码', trigger: 'blur' },],newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}],}}}

提交返回什么就不写了；

vue表单验证自定义验证规则相关推荐

vue表单的数据验证
1.在el-form中通过属性:rules进行绑定,它的值为验证规则对象rules <el-form :model="ruleForm" :rules="rules ...
antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法
在用到antd的Form组件的时候,可能会用到自定义的规则,以我的项目为例:在输入名称的时候需要请求接口,校验的内容是后台返回的内容,所以这个时候需要用到自定义的校验规则屏幕快照 2019-06-1 ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...
antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...
## antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) ##### antd 的表单校验方法包括 validateFields 和 validateField ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
vue表单验证，不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
vue 表单验证并提交
vue 表单验证并提交一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则二.表单提交时验证 1.表单的提交按钮 2.ethods 方法一.常用验证方式 ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...

vue表单验证自定义验证规则

vue表单验证自定义验证规则相关推荐

最新文章

热门文章