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>
              <template #label>
                <div class="item-label">
                  <span>填写邀请ID（选填）</span>
                  <img
                    :class="{ active: isIdShow }"
                    @click="isIdShow = !isIdShow"
                    src="@/assets/images/register/right-jian.svg"
                  />
                </div>
              </template>
              <el-input
                v-show="isIdShow"
                v-model="form.idkey"
                placeholder="填写邀请用户ID"
              />
            </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>

我们使用 el-form 组件创建了一个表单，其中的密码输入框使用了 el-input 组件，并设置了 type 属性为 "password"。

然后，在 formRules 中定义了验证规则，包括 required: true 表示必填项，min: 6, max: 24 表示密码长度为6-24个字符，pattern 使用正则表达式来校验密码是否包含至少一个大写字母、一个数字、一个特殊字符。

最后，在提交表单时，通过调用 this.$refs.form.validate 方法进行表单校验，如果校验通过，则执行提交逻辑；如果校验不通过，则会自动显示相应的错误提示信息。

分开校验

<script setup>
import { ref, reactive } from 'vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
const isIdShow = ref(false);
const ruleFormRef = ref(null);
const form = reactive({
  email: '',
  pwd: '',
  idkey: ''
});
const validateUppercase = (rule, value, callback) => {
  if (!/[A-Z]/.test(value)) {
    callback(new Error('密码必须包含至少一个大写字母'));
  } else {
    callback();
  }
};
const validateNumber = (rule, value, callback) => {
  if (!/\d/.test(value)) {
    callback(new Error('密码必须包含至少一个数字'));
  } else {
    callback();
  }
};
const validateSpecialCharacter = (rule, value, callback) => {
  if (!/[~`!@#$%^&*()_\-+={}0|;;<>.?/]/.test(value)) {
    callback(new Error('密码必须包含至少一个特殊字符'));
  } else {
    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' },
    { validator: validateUppercase, trigger: 'blur' },
    { validator: validateNumber, trigger: 'blur' },
    { validator: validateSpecialCharacter, trigger: 'blur' }
    // {
    //   pattern:
    //     /^(?=.*[A-Z])(?=.*\d)(?=.*[~`!@#$%^&*()_\-\+={}0|;;<>.?/])[A-Za-z\d~`!@#$%^&*()_\-\+={}0|;;<>.?/]*$/,
    //   message: '密码必须包含至少一个大写字母、一个数字、一个特殊字符',
    //   trigger: 'blur'
    // }
  ]
});
</script>

在上述示例中，我们将每个密码条件分别定义为单独的校验规则。使用 validator 属性来指定自定义的校验方法，其中 validateUppercase 方法用于校验是否包含至少一个大写字母，validateNumber 方法用于校验是否包含至少一个数字，validateSpecialCharacter 方法用于校验是否包含至少一个特殊字符。

在校验方法中，如果条件不满足，我们调用 callback 函数传递一个错误对象，否则调用 callback 函数传递空参数表示校验通过。

最后，在提交表单时，通过调用 this.$refs.form.validate 方法进行表单校验，依次触发每个校验规则。

实现效果