vue之elementui表单验证最基本实例

使用，在模板中

在js中

<template><div class="login-page"><div class="login-box"><div class="login-logo"><a href="../../index2.html"><b>vue</b>商城</a></div><div class="card"><div class="card-body login-card-body"><p class="login-box-msg">帐户登录</p><el-form :model="ruleForm":rules="rules"ref="ruleForm"class="demo-form-inline"><el-form-item prop="username"><el-input placeholder="账号"suffix-icon="iconfont icon-index"v-model="ruleForm.username"></el-input></el-form-item><el-form-item prop="password"><el-input type="password"placeholder="密码"suffix-icon="el-icon-date"v-model="ruleForm.password"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary"@click="submitForm('ruleForm')">提交</el-button><el-button @click="reset">重置</el-button></el-form-item></el-form><p class="mb-1"><a href="forgot-passwordword.html">忘记密码</a></p><p class="mb-0"><a href="register.html"class="text-center">注册新会员</a></p></div></div></div></div>
</template><script>
export default {data () {// 自定义验证规则var validateUser = (rule, value, callback) => {if (value === '') {callback(new Error('请输入账号'))} else {callback(console.log('账号验证成功'))}}return {ruleForm: {username: '11',password: '111'},rules: {username: [{ validator: validateUser, trigger: 'blur' }],password: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]}}},methods: {submitForm (formName) {this.$refs[formName].validate((valid) => {if (!valid) return console.log('error submit!!') // 如果验证不通过console.log('success')})},reset () {this.$refs.ruleForm.resetFields()}}
}
</script>
<style lang="less" scope>
.btns {display: flex;flex-direction: row-reverse;
}
</style>

vue之elementui表单验证最基本实例相关推荐

vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...
elementUI表单验证
elementUI表单验证注意: el-form中要有::model=" " :rules=" " el-form-item要有:prop 如果点击提交时也启 ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
elementUI表单验证怎么显示后台返回的错误信息
elementUI的表单验证使用非常方便,此处不赘述,网上的方法和官方文档都有描述. 如果后台返回的错误信息要显示在表单验证错误提示的地方,而不是另外弹出提示框或者,实现效果如下图: 这个效果要如何实 ...
elementUI表单验证之动态表单验证
elementUI 中 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. (1)常用表单验证 ...
element-ui表单验证：用户名、密码、电话、邮箱
之前设计login组件时增加了简单的表单验证,因此对应的users组件,添加用户功能也必须设置相应的验证规则. 文档form表单验证只提供了用户名/密码,是否必须/长度限制的验证.对于电话.邮箱和地址 ...
element-ui表单验证
情景我想利用饿了么框架实现表单验证 http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan 但是我的form里面的model和 ...
element-ui表单验证（验证手机号是否正确，自定义验证规则）
效果图 1. html <el-form :model="userForm"status-icon:rules="rules"class="lo ...
Vue简单的表单验证
前端验证必不可少~ 输入框验证 vue文件部分: <form :model="form" :rules="rules" ref="form&qu ...
Vue element 自定义表单验证(验证联系方式、邮箱、邮政编码)
<el-form:model="form":rules="rules"ref="formRef"style="max-wid ...

vue之elementui表单验证最基本实例

vue之elementui表单验证最基本实例相关推荐

最新文章

热门文章