Use el-form in the Vue project to verify whether the user input field meets the conditions verification-demo

achieve effect

 accomplish

<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>

Verify together 

<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>

We  el-form created a form using components, in which the password input box used  el-input components and set  type the properties to  "password".

Then,  formRules the verification rules are defined in , including  required: true indicating required fields, min: 6, max: 24 indicating that the password length is 6-24 characters, and pattern using regular expressions to verify whether the password contains at least one uppercase letter, one number, and one special character.

Finally, when submitting the form,  this.$refs.form.validate the form is verified by calling the method. If the verification passes, the submission logic is executed; if the verification fails, the corresponding error message will be automatically displayed.

Separate verification

<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>

In the above example, we defined each password condition as a separate validation rule. Use  validator attributes to specify custom verification methods, where  validateUppercase the method is used to verify whether it contains at least one uppercase letter, validateNumber the method is used to verify whether it contains at least one number, and validateSpecialCharacter the method is used to verify whether it contains at least one special character.

In the verification method, if the conditions are not met, we call  callback the function and pass an error object. Otherwise, we call  callback the function and pass empty parameters to indicate that the verification has passed.

Finally, when the form is submitted,  this.$refs.form.validate the form is verified by calling the method, and each verification rule is triggered in turn.

achieve effect