基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
2017-04-14 15:18
2691 查看
eleme写的基于vue2.0的前端组件库: http://element.eleme.io
我在平时使用过程中,遇到的问题。
2:有可能
2: 有可能
html:
css:
js:
See the Pen ele-form-numrules by LiuwqGit (@weiqinl) on CodePen.
欢迎留言讨论
我在平时使用过程中,遇到的问题。
自定义表单验证出坑:
1: validate/resetFields 未定义。
原因:
1:要验证的DOM,还没有加载出来。2:有可能
this.$refs[ruleForm].validate()方式不识别。需要使用:
this.$refs.ruleForm.validate();
解决方法
1: 要验证的DOM,还没有加载出来。this.ticketDialog = true; //对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 this.$nextTick(function() { this.$refs.ticketInfoForm.resetFields(); })
2: 有可能
this.$refs[ruleForm].validate()方式不识别。需要使用:
this.$refs.ruleForm.validate();
methods: { submitForm(ruleForm2) { //官网 this.$refs[ruleForm2].validate(); //在实际使用中,会报错。validate未定义 //使用this.$refs.ruleForm2.validate(); 成功。 this.$refs[ruleForm2].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } }
2: 数字类型的验证, 兼容mac和windows系统。
数字类型的验证需要在v-model处加上
.number的修饰符,这是
Vue自身提供的用于将绑定值转化为
number类型的修饰符。
<el-form-item label="年龄" prop="age"> <el-input type="number" v-model.number="ruleForm2.age"></el-input> </el-form-item>
案例
例子在 codepen 可以查看html:
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui/lib/index.js"></script> <div id="app"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input type="number" v-model.number="ruleForm.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div>
css:
@import url("//unpkg.com/element-ui/lib/theme-default/index.css");
js:
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.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm: { pass: '', checkPass: '', age: '' }, rules: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, methods: { submitForm(ruleForm) { //官网 this.$refs[ruleForm].validate(); //在实际使用中,会报错。validate未定义 // //使用this.$refs.ruleForm.validate(); 成功。 this.$refs.ruleForm.validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$nextTick(function() { this.$refs[formName].resetFields(); }) } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
See the Pen ele-form-numrules by LiuwqGit (@weiqinl) on CodePen.
总结
先看官方文档,一部好的文档,会解决大部分问题。遇到具体问题,认真仔细看相关部分的内容。欢迎留言讨论
相关文章推荐
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue elementUI之Form表单 验证
- Vue ElementUI之Form表单验证遇到的问题
- Vue Element Form表单时间验证控件使用
- Vue Elementui Form表单验证
- element-ui+vuex共享自定义方法进行表单验证 validator
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue elementUI之Form表单 验证
- vue使用Element组件时v-for循环里的表单项验证方法
- jQuery.validator.addMethod自定义验证方法【在表单验证中的使用 $("#appEdit_Form").validate({rules : {},messages:{}】
- Laravel中使用FormRequest进行表单验证及对验证异常进行自定义处理
- SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用
- Jquery基于Ajax方法自定义无刷新提交表单Form实例
- SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用
- sharepoint 2013基于AD的Form表单登录(四)——开发自定义登录过程需要引用文件路径。
- 基于自定义属性的Web客户端统一验证JavaScript函数库组件(ChkInputs)概述
- Form表单提交、自定义验证规则(validate插件)
- easyui-form添加自定义表单验证