2023年7月16日发(作者：)

elementUI表单⾃定义验证，css⽔平且垂直居中⽅法element UI 表单⾃定义验证element UI提供了⼀种内部的表单验证，但是这种⽅法不能够来进⾏复杂的验证，如邮箱，⼿机号等的验证需要⽤到⾃定义验证⾸先是element UI 提供的基础表单验证

rules: { //这⾥的username为prop绑定的名字 username: [ //required是否为必须的 //trigger触发正则判断的条件 { required: true, message: "请输⼊⽤户名", trigger: "blur" }, { min: 5,//最⼩的长度 max: 100,//最⼤的长度 message: "长度在 5 到 10 个字符", trigger: "blur" } ] }上⾯就是⼀个简单的正则验证⽅法，接下来就是⾃定义的表单验证

data(){ //验证邮箱的函数 const isEmail = (rule, value, callback) => { //邮箱正则 // eslint-disable-next-line no-useless-escape let reg = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/; let isTrue = (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.$te(async valid => { //根据isEmail中的callback来进⾏判断 if (valid) { const res = await adduser(belAlign); if ( == 201) { belAlign = { username: "", password: "", email: "", mobile: "" }; rlist(); } Visibleone = false; } }); },}关键点1. 表单名称 ref=”addUserForm”2. 表单绑定 :rules=rules3. el-form-item prop属性4. validate⽅法5. 提交⽅法：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; }这个⽅法，也可以实现效果