element UI 表单自定义验证

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

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

        <el-form
          ref="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-form
          ref="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-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 = 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;
        }
      });
    },
}

关键点

1. 表单名称 ref=”addUserForm”
2. 表单绑定 :rules=rules
3. 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;
			}

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