element ui表单验证

这里通过一个实例来说明表单验证：

如上图所示，我们点击“添加新用户”弹出弹框

这里只讲弹框里面的校验代码：

<template><div id="create-account">//指定数据中心的验证表单actionFormData，验证规则rules<el-formref="accountForm"label-width="80px":model="actionFormData":rules="rules"><el-form-itemlabel="姓名"prop="name"><el-inputv-model="actionFormData.name"autocomplete="off"/></el-form-item><el-form-itemlabel="密码"prop="password"required><el-inputv-model="actionFormData.password"type="password"autocomplete="off"/></el-form-item><el-form-itemlabel="邮箱"prop="email"required><el-inputv-model="actionFormData.email"autocomplete="off"/></el-form-item><el-form-itemlabel="锁定"prop="locked"><el-radio-group v-model="actionFormData.locked"><el-radio :label="0">是</el-radio><el-radio :label="1">否</el-radio></el-radio-group></el-form-item>//创建和更新按钮点击的时候去校验，验证规则rules<el-form-item><el-buttonv-if="iscreate"type="primary"@click="newAccount('accountForm')">创建</el-button><el-buttonv-elsetype="primary"@click="updateAccount('accountForm')">更新</el-button><el-button @click="cancelAccount()">取消</el-button></el-form-item></el-form></div>
</template><script>
import { mapActions } from 'vuex'export default {props: {actionFormData: {type: Object,default: () => {}},iscreate: {type: Boolean,default: true}},data() {var validatePass = (rule, value, callback) => {setTimeout(() => {if (value.length === 0) {return callback(new Error('密码不能为空~'))} else if (value.length >= 15) {return callback(new Error('密码不能大于15个字符~'))} else {return callback()}}, 800)}var validateMail = (rule, value, callback) => {const reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/setTimeout(() => {if (value.length === 0) {return callback(new Error('邮箱不能为空~'))} else if (value.length >= 30) {return callback(new Error('密邮箱不能大于30个字符~'))} else if (reg.test(value) === false) {return callback(new Error('邮箱格式不正确~'))} else {return callback()}}, 800)}return {rules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 0, max: 20, message: '不能超过20个字符', trigger: 'blur' }],password: [{validator: validatePass,message: '请输入0~15个字符的密码',trigger: 'blur'}],email: [{validator: validateMail,message: '请输入正确格式的邮箱地址',trigger: 'blur'}]}}},methods: {...mapActions(['NEW_USERS','CANCEL_USERS','UPDATE_USER','GET_CHANNEL_LIST']),newAccount(formName) {this.$refs[formName].validate(valid => {if (valid) {const postData = { ...this.actionFormData, formName }this.NEW_USERS(postData).then(data => {if (data === null) returnthis.$emit('closeDialogAction')this.$notify({title: '成功',message: '创建用户成功',type: 'success',duration: 1500})})} else {return false}})},updateAccount(formName) {this.$refs[formName].validate(valid => {if (valid) {const postData = { ...this.actionFormData, formName }this.UPDATE_USER(postData).then(data => {if (data === null) returnthis.$emit('closeDialogAction')this.$notify({title: '成功',message: '修改用户成功',type: 'success',duration: 1500})})} else {return false}})},cancelAccount() {this.CANCEL_USERS()this.$emit('closeDialogAction')}}
}
</script>
<style lang="scss">
#create-account {.el-form-item__label {text-align: right;vertical-align: middle;float: left;font-size: 14px;color: #606266;line-height: 40px;padding: 0 12px 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;margin-left: -6px;width: 85px !important;}
}
</style>

这里代码只要注意data 里面的 rules对象，里面设置了对表单里面数据的校验。邮箱这里我们使用了自定义的校验，所以我们定义了validatePass 和 validateMail两个变量来校验。

注意点： 自定义的校验，每一个返回都必须有一个callback函数

element ui表单验证相关推荐

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
Element UI——表单验证输入的数字检测出来是string解决方案
问题描述打印判断类型问题分析解决方案数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
element ui 表单验证通过后没有绿色框求解（已解）
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
element ui表单验证，验证通过但是不进if(valid){}步骤
表单自定义验证,如图: data中定义的验证规则: var validatePass = (rule, value, callback) => {if (value === '') {retur ...
element -ui 表单验证如果需要验证的v-model 是对象中的对象总是提示没有填写....
如果需要验证的是以上方式那么 rules的书写方法需要该改变 ? 转载于:https://www.cnblogs.com/wxqworld/p/11301139.html
Element ui 表单验证触发方式：trigger的两种选项
trigger: 'blur' blur失去焦点比如输入框里.校验文本框是否为空 trigger: 'change' change数据改变需要手动选择的东西,可以用change 区别: 没有进行任 ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...

element ui表单验证

element ui表单验证相关推荐

最新文章

热门文章