element UI 表单自定义验证

element UI提供了一种内部的表单验证，但是这种方法不能够来进行复杂的验证，如邮箱，手机号等的验证需要用到自定义验证

首先是element UI 提供的基础表单验证

        <el-formref="addUserForm":label-position="labelPosition"label-width="70px":model="formLabelAlign":rules="rules" //绑定的验证方法>          <el-form-item label="用户名" prop="username"><el-input v-model="formLabelAlign.username"></el-input></el-form-item></el-form>

      rules: {//这里的username为prop绑定的名字username: [//required是否为必须的//trigger触发正则判断的条件{ required: true, message: "请输入用户名", trigger: "blur" },{min: 5,//最小的长度max: 100,//最大的长度message: "长度在 5 到 10 个字符",trigger: "blur"}]}

上面就是一个简单的正则验证方法，接下来就是自定义的表单验证

        <el-formref="addUserForm"label-width="70px":model="formLabelAlign":rules="rules" //绑定的验证方法>          <el-form-item label="邮箱" prop="email"><el-input v-model="formLabelAlign.email"></el-input></el-form-item></el-form>

data(){//验证邮箱的函数const isEmail = (rule, value, callback) => {//邮箱正则// eslint-disable-next-line no-useless-escapelet reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;let isTrue = reg.test(value);if (isTrue || value == "") {return callback();//这里的callback返回给}callback(new Error("不符合邮箱的规则，请重新输入"));};return{rules: {email: [//required:是否必须的参数{ required: false, message: "请输入邮箱", trigger: "blur" },//这里validator绑定的是验证方法{ validator: isEmail, trigger: "blur" }],}}
}
methods:{//点击事件addUserConfirm() {//调用封装的接口将数据添加到后台this.$refs.addUserForm.validate(async valid => {//根据isEmail中的callback来进行判断if (valid) {const res = await adduser(this.formLabelAlign);if (res.data.meta.status == 201) {this.formLabelAlign = {username: "",password: "",email: "",mobile: ""};this.getuserlist();}this.dialogVisibleone = false;}});},
}

关键点

表单名称 ref=”addUserForm”
表单绑定 :rules=rules
el-form-item prop属性
validate方法
提交方法：

css居中方法

**第一种：**通过绝对定位的方式 absolute + 负margin

 #big_box{border: 1px solid red;width: 18.75rem;height: 18.75rem;position: relative;}#box{border: 1px solid red;width: 6.25rem;height: 6.25rem;position: absolute;top: 50%;left: 50%;margin-left: -3.125rem;margin-top: -3.125rem;}

定位的top left 是以左上角为中心进行居中，所以这时候利用margin-left marin-top为负的小盒子的长宽就能实现居中，缺点是需要知道小盒子的宽和高

**第二种：**也是通过绝对定位的方式 absolute + margin auto

     #big_box{border: 1px solid red;width: 18.75rem;height: 18.75rem;position: relative;}#box{border: 1px solid red;width: 6.25rem;height: 6.25rem;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}

这种方法也是利用了定位，父相子绝后把margin变为auto就能实现剧中，这种方法是现在比较常见的方法，没有什么缺点兼用型也可以

第三种：利用css3的新增属性table-cell

     #big_box {border: 1px solid red;width: 18.75rem;height: 18.75rem;display: table-cell;vertical-align: middle;}#box {border: 1px solid red;width: 6.25rem;height: 6.25rem;margin: auto;}

这个方法还有一个好处就是，div2的高度可以不固定

第四种：利用display来实现

 #big_box {border: 1px solid red;width: 18.75rem;height: 18.75rem;display: flex;justify-content:center;align-items: center;}#box {border: 1px solid red;width: 6.25rem;height: 6.25rem;}

这个方法，也可以实现效果

element UI 表单自定义验证，css水平且垂直居中方法相关推荐

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
element ui表单验证，验证通过但是不进if(valid){}步骤
表单自定义验证,如图: data中定义的验证规则: var validatePass = (rule, value, callback) => {if (value === '') {retur ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单使用记录 element ui 表单 input 文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式 ...
layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
Element UI 表单在el-form-item中使用自定义验证规则
1:官网示例 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFo ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...

element UI 表单自定义验证，css水平且垂直居中方法

element UI 表单自定义验证

css居中方法

element UI 表单自定义验证，css水平且垂直居中方法相关推荐

最新文章

热门文章