vue表单定义校验规则；表单属性校验不通过时开启拦截提醒，并拦截表单提交。

• vue表单定义校验规则；表单属性校验不通过时开启拦截提醒，并拦截表单提交。

<el-form 
	:model="submitContent" 
	:rules="rules" 
	ref="submitForm" 
	label-width="100px" 
	class="submit-form">
  <el-form-item label="账号" prop="userId">
    <el-input placeholder="请输入账号" v-model="submitContent.userId"></el-input>
  </el-form-item>
   <el-form-item label="密码" prop="pwd">
    <el-input placeholder="请输入密码" v-model="submitContent.pwd"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitConfirm('submitForm')">确认</el-button>
  </el-form-item>
</el-form>
<script>
  import request from '../../../utils/request';
  export default {
    data() {
      return {
        submitContent: {
          userId: '',
          pwd: ''
        },
        rules: {
          userId: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
          ]
        }
      };
    },
	methods: {
		submitConfirm(formName) {
			// 开启校验：校验不通过时拦截表单提交
			this.$refs[formName].validate((valid) => {
				if (valid) {  
					// 校验通过，允许提交表单，请求接口
					console.log("校验通过"); 
					request({
						method: 'post',
						url: '/user/login',
						data: {
							userId: this.userId,
							pwd: this.pwd,
						}
					}).then((res) => {
						if(res.data.code == '000000') {
							this.$message({
								type: 'success',
								message: res.data.msg,
							})
						} else if(res.data.code != '000000') {
							this.$message({
								type: 'error',
								message: res.data.msg,
							})
						}
					})
				} else {   
					//校验不通过，拦截表单提交
					alert('未填必选项');
					return false;
				}
			});
		}
	}
}
</script>