vue表单自定义校验规则

<div id="app">
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm2.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button><el-button @click="resetForm('ruleForm2')">重置</el-button></el-form-item>
</el-form>
</div>

var Main = {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {callback();}}}, 1000);};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm2.checkPass !== '') {this.$refs.ruleForm2.validateField('checkPass');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm2.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm2: {pass: '',checkPass: '',age: ''},rules2: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

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

element 修改表单值后表单验证无效_element 表单自定义校验规则
首先在我们的vue + element 项目中,尤其是后台有关的项目或者涉及到大量操作数据的平台,重中之重的就是关于数据的验证,也就是关于我们表单的验证,如果在前端做好了这些,相当于在前后台交互数据的 ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
element-ui的表单校验；el-form表单校验；el-form表单自定义校验；手机号校验；车牌号校验；车牌号正则校验；
示例:代码在末尾可以直接复制使用一.基本属性认知: 1. required: true 会有 * , 但仅是触发最后点击提交按钮时,校验某一项位必填:与输入事件或者选择或者失焦时候怎么校验无关 ...
vue表单rules校验
文章目录一.表单校验 1. 表单项校验 2. 表单整体校验二.规则模板三.踩坑合集 1. 单项规则校验没问题,表单整体校验不通过? 一.表单校验此部分详情可参考此博客<在vue中使用ru ...
layui的表单——自定义验证规则
最近layui的表单用的比较多,所以整理来一下自定义的验证如下(下面是自己写的例子): layui的官网引入layui之后 html <form action="" cla ...
【vue 项目】表单正则表达式校验1-32位，中文、英文、数字及特殊字符_-，必须以中文或英文字符开头等
验证内容 (1)1-32位,中文.英文.数字及特殊字符_-,必须以中文或英文字符开头 (2)1-32位,中文.英文.数字及特殊字符_-,必须以中文.英文.数字开头 data() {// 表单自定义校验 ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...
vue element form 自定义校验1(表单校验)
通过ref属性获得表单对象,调用表单对象的validate函数进行表单的整体校验 <template><!--rule ...

vue表单自定义校验规则

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

最新文章

热门文章