Vue使用el-form校验用户输入数据格式-demo

效果

实现

<div class="registerWarp">
          <el-form
            label-position="top"
            label-width="100px"
            :model="form"
            ref="ruleFormRef"
            :rules="rulesForm"
            hide-required-asterisk
            class="register-form"
          >
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="电子邮箱" />
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input
                v-model="form.pwd"
                type="password"
                show-password
                placeholder="登录密码"
              />
            </el-form-item>
            <el-form-item>
              <div class="form-bottom">
                <div class="promise">
                  点击注册即表示同意<span>服务协议</span>和<span>隐私条款</span>
                </div>
                <div class="submit-btn">注册</div>
                <div class="switch-login">已有账户？<span>去登录</span></div>
              </div>
            </el-form-item>
          </el-form>
        </div>

校验规则

<script setup>
import { ref, reactive } from 'vue';
const isIdShow = ref(false);
const ruleFormRef = ref(null);
const form = reactive({
  email: '',
  pwd: '',
  idkey: ''
});
const validatePwd = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'));
  }
  callback();
};
const rulesForm = reactive({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱输入格式错误', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 24, message: '密码长度为6-24个字符', trigger: 'blur' },
    {
      pattern:
        /^(?=.*[A-Z])(?=.*\d)(?=.*[~`!@#$%^&*()_\-\+={}0|;;<>.?/])[A-Za-z\d~`!@#$%^&*()_\-\+={}0|;;<>.?/]*$/,
      message: '密码必须包含至少一个大写字母、一个数字、一个特殊字符',
      trigger: 'blur'
    }
//自定义校验规则
    // {required: true, message: '请输入密码', trigger: 'blur',validator: validatePwd}
  ]
});
</script>